Подменю Backbone для списка

Мне сложно понять подменю с Backbone и пытаюсь научиться их использовать.

Я хочу создать простой неупорядоченный список, используя основное представление для контейнера и под-просмотр для каждого элемента списка.

Вот сценарий к тому, что у меня есть сейчас: http://jsfiddle.net/LrZrJ/

Вот HTML, который я хочу увидеть в конце:

<div>
 <h3>Stat = ok</h3>
 <ul>
 <li>Hello world</li>
 </ul>
</div>

Вот мой JavaScript:

var TheModel = Backbone.Model.extend({
 default: {
 photos: '',
 stat: '' 
 }
});

var TheCollection = Backbone.Collection.extend({
 model: TheModel,

 url: 'http://api.flickr.com/services/rest/?page=1&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=candy&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?'

});

// The main view
var List = Backbone.View.extend({
 el: '.js-container',

 initialize: function () {
 this.collection = new TheCollection();

 this.item = new ListItem();

 return this;
 },

 render: function () {
 var self = this;

 this.collection.fetch({
 dataType: 'jsonp',
 success: function (data) {
 var listTemplate = _.template( $('#listContainer').html(), {
 collection: self.collection.toJSON()
 });

 self.$el.html(listTemplate);
 self.$el.html( self.item.render() );
 }
 });

 return this;
 }

});

var ListItem = Backbone.View.extend({
 render: function () {
 var itemTemplate = _.template( $('#item').html(), {} );

 return itemTemplate;
 }

});

var myList= new List();
myList.render();

Вот мой HTML:

1 ответ

Ты почти там. У вас есть две проблемы прямо здесь:

self.$el.html(listTemplate);
self.$el.html( self.item.render() );

Прежде всего, функция jQuery html заменяет все:

Когда <code>.html()</code> используется для установки содержимого элемента, любой контент, который был в этом элементе, полностью заменяется новым контентом.

Это означает, что ваш второй вызов .html:

self.$el.html( self.item.render() );

перезаписывает все, начиная с первого. Скорее всего, вы захотите использовать append, который просто добавит

  • к тому, что вы append. Вы также захотите append к
      , а не к self.$el; Магистраль включает в себя this.$ функцию this.$ Функция в вашем представлении для поиска в представлении el:

      <span>$ (jQuery)</span> <code>view.$(selector)</code>

      [...] Это эквивалентно запуску: view. $ El.find(selector)

      Итак, чтобы найти

        и положив
      • внутри него, вы можете сказать следующее:
        self.$('ul').append(self.item.render())

        В то время как я здесь, для render представления обычно принято return this а затем вызывающий может something.append(v.render().el) чтобы получить представление на странице. Вы можете использовать setElement для замены подэлемента el с помощью

      • из шаблона:
        var ListItem = Backbone.View.extend({
         render: function () {
         var itemTemplate = _.template( $('#item').html(), {} );
         this.setElement(itemTemplate);
         return this;
         }
        });

        а затем self.$('ul').append(self.item.render().el) в родительском.

        Демо: http://jsfiddle.net/ambiguous/JHV9w/1/

        Альтернативой было бы добавить tagName: 'li' в ListItem чтобы Backbone создавал

      • качестве этого вида el а затем удалял
      • ...
      • из шаблона. Это даст вам ListItem следующим образом:
        var ListItem = Backbone.View.extend({
         tagName: 'li',
         render: function () {
         var itemTemplate = _.template( $('#item').html(), {} );
         this.$el.html(itemTemplate);
         return this;
         }
        });

        и шаблон #item:

        Эта структура была бы (ИМО) более стандартной, чем то, с чем вы работаете в настоящее время (но Backbone не очень упрямый, поэтому делайте то, что работает для вас).

        Демо: http://jsfiddle.net/ambiguous/DVFVT/

  • licensed under cc by-sa 3.0 with attribution.