Databases
StackOverflow2013
Postsdbo
POBind collection of models to a table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBind collection of models to a table
    text
    copied!<p>So I've started looking into backbone.js for the first time today. One of the things I'm keen to get stuck into is binding model properties to useful controls. My question really is how to go about bindind individual model properties to controls. </p> <p>I came up with an example of this where you can bind a collection of any model to a table choosing which properties to ignore, however I have a feeling I'm not going the right way about this. The idea is to eventually extend this and make the table editable like a data grid. I've added this to JSFiddle @ <a href="http://jsfiddle.net/yqjvK/" rel="nofollow">http://jsfiddle.net/yqjvK/</a></p> <p><strong>I use a helper function to generate templates for the model. This is used to generate table headers and row data</strong></p> <pre><code> //helper function to loop through a model's attributes choosing which to ignore function LoopAtts(model,func,ignore){ //calls func on each unignored model attribute } </code></pre> <p><strong>This is a basic model I use to illustrate the example</strong></p> <pre><code>var Person = Backbone.Model.extend({ defaults: function() { return { firstName: "N/A", lastName:"N/A", score:function(){ return 0; } }; }, }); </code></pre> <p><strong>This is a view I use to print out a model's cell data, it listens to when a property is changed and for now just sets the html to the updated value.</strong></p> <pre><code>var RowView = Backbone.View.extend({ tagName: "tr", className: "rowView", initialize: function() { var cells = LoopAtts(this.model,CellTemplate,this.options.ignore); this.listenTo(this.model, "change", this.change); this.$el.html(_.template(cells)(this.model.attributes)); }, change:function(e){ console.log(e); for(p in e.changed) { if(e.changed.hasOwnProperty(p)) { //handle update of cell this.$el.find("#"+p).html(this.model.attributes[p]); } } } }); </code></pre> <p><strong>This is a view I use to bind to collections, adding rowViews when elements are added to the collection.</strong></p> <pre><code>var TableView = Backbone.View.extend({ defaults: {noData:'&lt;tr&gt;&lt;td&gt;No Data&lt;/td&gt;&lt;/tr&gt;'}, tagName: "table", firstTime: true, initialize: function() { this.listenTo(People, 'add', this.addOne); this.listenTo(People, 'reset', this.addAll); this.$el.html(this.noData); }, addOne: function(o) { //singleton for table data if(this.firstTime) { var headers = LoopAtts(o,HeaderTemplate,this.options.ignore) this.$el.html(_.template(headers)(o.attributes)); this.firstTime = false; } //assign view to model and append it to the table var view = new RowView({model: o,ignore:this.options.ignore}); this.$el.append(view.render().el); }, addAll: function() { this.model.models.each(this.addOne, this); } }) </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload