Лучший способ для визуализации коллекции в Backbone

Question

Я использую Backbone и у меня есть следующие модели и коллекции

App.Models.Person = Backbone.Model.extend({ 
}); 

App.Collections.People = Backbone.Collection.extend({ 
    model: App.Models.Person, 
    url: 'api/people', 
}); 

Однако то, что я изо всех сил на это лучший способ сделать эту коллекцию. Вот как я сделал это до сих пор, который работает, но не кажется, самым элегантным решением

App.Views.PeopleView = Backbone.View.extend({ 
    el: $(".people"), 

    initialize: function() { 
     this.collection = new App.Collections.People(); 

     //This seems like a bad way to do it? 
     var that = this; 
     this.collection.fetch({success: function(){ 
      that.render(); 
     }}); 
    }, 

    render: function() { 
     var that = this; 
     _.each(this.collection.models, function (item) { 
      that.renderPerson(item); 
     }, this); 
    }, 

Я довольно новый для Backbone, но присвоить this на другой переменный, я использую его в функции успеха просто кажется плохим способом делать что-то? Любая помощь в передовой практике будет оценена по достоинству.

Answer 1

Магистраль позволяет вам регистрироваться для событий, на которые вы можете реагировать. Когда сбор синхронизируется с сервером, он всегда будет запускать событие sync. Вы можете прослушивать это событие и вызывать любой метод. Например ...

initialize: function() { 
    this.collection = new App.Collections.People(); 
    this.listenTo(this.collection, "sync", this.render); 

    // Fetch the initial state of the collection 
    this.collection.fetch(); 
} 

... настроит вашу коллекцию так, что она будет всегда вызывать this.render() всякий раз, когда происходит sync.

The docs on Backbone Events являются краткими, но довольно хорошими. Имейте в виду несколько вещей:

• метод используется для регистрации слушателей событий (т.е. listenTo или on) изменения, как вы обеспечиваете контекст вызываемой функции. listenTo, например, будет автоматически использовать текущий контекст; on не будет. This piece of the docs объясняет это довольно хорошо.
• Если вам нужно удалить представление, вам необходимо отключить прослушиватели событий. Самый простой способ сделать это - использовать listenTo для их соединения в первую очередь; то при уничтожении представления вы можете просто позвонить view.stopListening().

Для рендеринга есть много предложений о том, как это сделать. Как правило, иметь возможность отображать каждую отдельную модель является одним из способов. Вы также можете использовать Backbone.Collection#each для итерации по моделям и контролировать объем функции итерации. Например:

render: function() { 
    this.collection.each(function(model) { 
     var view = new App.Collections.PersonView({ model: model }); 
     view.render(); 
     this.$el.append(view.$el); 
    }, this);  
} 

Обратите внимание второй аргумент .each определяет область итератора. (Опять же, взгляните на the docs on controlling scope.Если вы предпочтете получить поддержку каркаса с рендерингом, ознакомьтесь со статьями CollectionView и ItemView.

Answer 2

Если ваше представление должно просто отображать коллекцию, вы можете отправить коллекцию в temnplate и выполнить итерацию в шаблоне, иначе вы можете создать другой подвид для этой цели или отправить отдельные модели коллекции в другой подзаголовок и добавить к ней контейнер, надеюсь, что это было полезно.