Javascript 将Backbone.js异步获取操作结果绑定到视图的正确方法

我想知道是否有关于“获取”并将数据集合绑定到Backbone.js中的视图的最佳方法的指针

我正在使用异步获取操作填充我的集合，并成功地将结果绑定到模板以显示在页面上。当异步获取操作在主线程之外执行时，我将丢失对主干视图对象的引用（本例中为SectionsView）。在这种情况下，我无法引用$el来追加结果。我被迫在页面上创建另一个DOM引用以注入结果。这是可行的，但我不满意的是

在执行异步获取时，我丢失了对视图的引用，有没有更干净的方法来实现这一点？我觉得我遗漏了一些东西……任何指点都将不胜感激

SectionItem = Backbone.Model.extend({ Title: '' });
SectionList = Backbone.Collection.extend({
    model: SectionItem,
    url: 'http://xxx/api/Sections',
    parse: function (response) {
        _(response).each(function (dataItem) {
            var section = new SectionItem();
            section.set('Title', dataItem);
            this.push(section);
        }, this);

        return this.models;
    }
});

//Views---
var SectionsView = Backbone.View.extend(
        {
            tagName : 'ul',
            initialize: function () {
                _.bindAll(this, 'fetchSuccess');
            },
            template: _.template($('#sections-template').html()),
            render: function () {
                var sections = new SectionList();
                sections.fetch({ success: function () { this.SectionsView.prototype.fetchSuccess(sections); } }); //<----NOT SURE IF THIS IS THE BEST WAY OF CALLING fetchSuccess?
                return this;
            },
            fetchSuccess: function (sections) {
                console.log('sections ' + JSON.stringify(sections));
                var data = this.template({
                    sections: sections.toJSON()
                });
                console.log(this.$el); //<-- this returns undefined ???
                $('#section-links').append(data); //<--reference independent DOM div element to append results
            }
        }
    );

SectionItem=Backbone.Model.extend（{Title:''}）；
SectionList=Backbone.Collection.extend({
型号：SectionItem，
网址：'http://xxx/api/Sections',
解析：函数（响应）{
_（响应）。每个（功能）（数据项）{
var section=新的SectionItem（）；
节.集（'标题'，数据项）；
这个.推（段）；
}，这个）；
把这个还给我；
}
});
//观点---
var SectionsView=Backbone.View.extend(
{
标记名：“ul”，
初始化：函数（）{
_.bindAll（这是“fetchSuccess”）；
},
模板：35;.template（$（'#节模板'）.html（）），
渲染：函数（）{
var sections=新的SectionList（）；
sections.fetch（{success:function（）{this.SectionsView.prototype.fetchSuccess（sections）；}}}}}）；//darthal，为什么要重新实现解析？它似乎与主干默认的功能完全相同（从AJAX调用接收模型数组并创建模型，然后将它们添加到集合中）

现在开始回答您的问题…您应该使用集合的重置事件来进行渲染。在添加或删除单个实例时，您也有一个添加和删除操作，但是提取操作将重置集合（全部删除然后全部添加），并且只会触发一个重置事件，而不是多个删除/添加事件

因此，在您的应用程序中：

this.collection.on("reset", this.fetchSuccess, this);

如果您想知道this.collection来自何处，则在创建视图时需要将它作为一个参数提供给视图，您可以传递模型或集合或两者，它们将自动添加到对象（视图）的上下文中。此参数的值应为SectionList的一个实例

您还必须更新fetchSuccess以依赖于this.collection而不是一些参数。主干集合提供了.each方法，如果您需要在所有模型上进行迭代以执行向DOM添加HTML之类的操作

在大多数情况下，您不需要fetchSuccess，只需使用呈现：当集合准备就绪（“重置”）时，基于集合呈现DOM

因此，总结一下最普遍的模式：

集合应该独立于视图：您将集合作为参数提供给视图创建，集合不应该从特定视图创建

将视图绑定到集合的重置事件（+需要时添加、删除）以运行渲染（）

this.collection.on（“重置”，this.render，this）

您可以随时（可能在初始化应用程序时）提取集合

启动应用程序的典型代码如下所示：

var sections = new SectionList();
var sectionsView = new SectionsView({collection: sections});
sections.fetch();

因为您在视图的initialize中绑定了reset事件，所以您不必担心任何事情，视图的render（）将在获取之后运行。
darthal，为什么要重新实现parse？它似乎与Backbone默认做的完全一样（从AJAX调用接收一组模型并创建模型，然后将它们添加到集合中）

现在开始回答您的问题…您应该使用集合的重置事件来进行渲染。在添加或删除单个实例时，您也有一个添加和删除操作，但是提取操作将重置集合（全部删除然后全部添加），并且只会触发一个重置事件，而不是多个删除/添加事件

因此，在您的应用程序中：

this.collection.on("reset", this.fetchSuccess, this);

如果您想知道this.collection来自何处，则在创建视图时需要将它作为一个参数提供给视图，您可以传递模型或集合或两者，它们将自动添加到对象（视图）的上下文中。此参数的值应为SectionList的一个实例

您还必须更新fetchSuccess以依赖于this.collection而不是一些参数。主干集合提供了.each方法，如果您需要在所有模型上进行迭代以执行向DOM添加HTML之类的操作

在大多数情况下，您不需要fetchSuccess，只需使用呈现：当集合准备就绪（“重置”）时，基于集合呈现DOM

因此，总结一下最普遍的模式：

集合应该独立于视图：您将集合作为参数提供给视图创建，集合不应该从特定视图创建

将视图绑定到集合的重置事件（+需要时添加、删除）以运行渲染（）

this.collection.on（“重置”，this.render，this）

您可以随时（可能在初始化应用程序时）提取集合

启动应用程序的典型代码如下所示：

var sections = new SectionList();
var sectionsView = new SectionsView({collection: sections});
sections.fetch();

因为您在视图的初始化中绑定了重置事件，所以无需担心任何事情，视图的render（）将在获取后运行。
感谢提供详细的输入Enders:）…我将仔细阅读您的建议…一旦我有机会回顾您的上述步骤，我将更正式地作出回应..嘿，Enders，谢谢您的回答非常有用，非常感谢。只需修改一下
sections.fet