Backbone Sub-View для списка

Question

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

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

Вот Fiddle к тому, что я в настоящее время: http://jsfiddle.net/LrZrJ/

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

<div class="js-container"> 
    <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:

<script type="text/template" id="listContainer"> 
    <h3>Stat = <%- collection[0].stat %></h3> 
    <ul> 

    </ul> 
</script> 

<script type="text/template" id="item"> 
    <li>Hello world</li> 
</script> 

<div class="js-container"> 
</div> 

Answer 1

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

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

Прежде всего, JQuery-х html function заменяет все:

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

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

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

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

$ (JQuery)view.$(selector)

[...] Это эквивалентно запуск:. Зрения $ el.find (селектор)

Так, чтобы найти <ul> и поставить <li> внутри него, вы можете сказать следующее:

self.$('ul').append(self.item.render()) 

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

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 так, что магистральная бы создать <li> как эта точка зрения el-х, а затем удалить <li>...</li> из шаблона. Это даст вам ListItem так:

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

и #item шаблон:

<script type="text/template" id="item"> 
    Hello world 
</script> 

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

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