Good day, there is a code http://codepen.io/megakolyan/pen/eBrJvw it works, but I want to put in the template the data of each model in each. To prevent porridge in the code - how can I do it?

var InvoiceItemModel = Backbone.Model.extend({ }); var InvoiceItemCollection = Backbone.Collection.extend({ model: InvoiceItemModel }); var InvoiceItemListView = Backbone.View.extend({ // HTML element name, where to render a view. el: 'body', // Render view. render: function() { var html = ''; _.each(this.collection.models,function(model,index,list) { var item_html = 'Description: ' + model.get('description') + '. ' + 'Price: ' + model.get('price') + '. ' + 'Quantity: ' + model.get('quantity') + '.'; html = html + '<li>' + item_html + '</li>'; }); html = '<ul>' + html + '</ul>'; // Set html for the view element using jQuery. $(this.el).html(html); } }); var invoiceItemCollection = new InvoiceItemCollection([ {description: 'Wooden Toy House', price: 22, quantity: 3 }, {description: 'Farm Animal Set', price: 17, quantity: 1 }, {description: 'Farmer Figure', price: 8, quantity: 1 }, {description: 'Toy Tractor', price: 15, quantity: 1 }]); var invoiceItemListView = new InvoiceItemListView({ // Pass model as a parameter to a view. collection: invoiceItemCollection }); invoiceItemListView.render();
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Can be done quite simply. Approximately in this way makes MarionetteJS.

 // define class ItemView var ItemView = Backbone.View.extend({ template: _.template($('#list_item').html()), constructor: function(model, options) { this.model = model; Backbone.View.call(this, options); }, render: function() { this.$el.html(this.template({ model: this.model })); return this; } }); // define class ListView var ListView = Backbone.View.extend({ constructor: function(collection, options) { this.collection = collection; Backbone.View.call(this, options); }, render: function() { this.collection.forEach(function(model) { var item = new ItemView(model); item.render(); this.$el(item.$el); }); $('#content').html(this.$el) return this; } }); // Create collection var collection = new Backbone.Collection([ {id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'} ]); // Create list instance var list = new ListView(collection); list.render();

The #list_item template should contain only a single line template.

 <script type="text/template" id="list_item"> <span><%= model.get('name') %></span> </script>

PS Example already modify under their need. Good luck!

  • Just noticed. Replace the line this. $ El (item. $ El); on this. $ el.append (item. $ el); - Aries Ua