1

Доброго времени суток, есть код http://codepen.io/megakolyan/pen/eBrJvw он работает но я хочу вывести в шаблон данные каждой модели в each. Чтобы не получалось каши в коде - как я могу это сделать?

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();
1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 8 дек 2016 в 6:14

1 ответ 1

2

Можно сделать довольно просто. Приблизительно таким способом делает 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();

Шаблон #list_item должен содержать только шаблон одной строки.

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

PS Пример уже доработайте под свои нужны. Удачи!

1
  • Только заметил. Замените строчку this.$el(item.$el); на this.$el.append(item.$el); 8 дек 2016 в 6:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.