CODEWITHSUNDEEP
javascriptbackbone.js
John O
John O

Reputation: 5433

How do I render multiple records out to a html table with Backbone.js ?

var ContractModel = Backbone.Model.extend({
    url:  "${g.createLink(controller:'waiverContract', action:'index')}"
})

var contract = new ContractModel({});
contract.fetch();
var contracts = new Backbone.Collection.extend({
    model: contract
});

var ContractView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function() {
        var root = this.$el;
        _.each(this.model, function(item) {
            var row = '<tr><td>' + item + '</td></tr>';
            root.find('tbody').append(row);
        });
        return this;
    }
});

var cView = new ContractView({ model: contract, el: $('#contracts') });

I have Chrome's developer tools open. If I do a console.log(this.model) inside of the render function, I can see a mess of an object, of which the two records are stored in .attributes. But instead of two rows being added to the table, I get 7. 6 of which are objects. (Though I see 9 subobjects in Chrome's console).

Not much of this makes sense to me. Can anyone help me not only get this working, but also understand it? I know that render() fires off as soon as I have instantiated cView, and I know that it's doing the ajax as soon as I do .fetch() into the model. But that's the limit of what I can understand in this.

Upvotes: 2

Views: 380

Answers (1)

mdellanoce
mdellanoce

Reputation: 296

You should fetch and iterate on the collection, not the model. A model is one "thing" and a collection has many "things". Assuming you are fetching a JSON formatted array into your model, it will end up with properties like "1", "2", and so on, and each of these will just be a normal Javascript object, not a ContractModel instance.

Here is how you might restructure your code:

var ContractModel = Backbone.Model.extend();
var ContractCollection = Backbone.Collection.extend({
  //ContractModel class, not an instance
  model: ContractModel,
  //Set the url property on the collection, not the model
  url:  "${g.createLink(controller:'waiverContract', action:'index')}"
})

var ContractView = Backbone.View.extend({
  initialize: function(){
    //Bind the collection reset event, gets fired when fetch complets
    this.collection.on('reset', this.render, this);
  },
  render: function() {
    //This finds the tbody element scoped to your view.
    //This assumes you have already added a tbody to the view somehow.
    //You might do this with something like
    //this.$el.html('<table><tbody></tbody></table>');
    var $tbody = this.$('tbody');
    this.collection.each(function(contract) {
      //Add any other contract properties here,
      //as needed, by calling the get() model method
      var row = '<tr><td>' + contract.get('someContractProperty') + '</td></tr>';

      //Append the row to the tbody
      $tbody.append(row);
    });
    return this;
  }
});

//Instantiate collection here, and pass it to the view
var contracts = new ContractCollection();
var cView = new ContractView({
  collection: contracts,
  el: $('#contracts')
});
//Makes the AJAX call.
//Triggers reset on success, and causes the view to render.
//Assumes a JSON response format like:
// [ { ... }, { ... }, ... ]
contracts.fetch();

Upvotes: 2

Related Questions