BackboneJS 嵌套视图未呈现答案

【问题标题】：BackboneJS nested view not renderingBackboneJS 嵌套视图未呈现
【发布时间】：2016-05-13 17:49:39
【问题描述】：

我在灯箱内有backbonejs form，html <select> 作为子视图。对于我从服务器加载的select<option> 数据，我对此select 有单独的模型和集合。

<select name="organization" id="organization" class="main__form--select main__form--select--js">
    <option value="no">Organizations not found, Please add one</option>
</select>

选项模型（optionModel）

return Backbone.Model.extend({
    defaults : {
        "name" : 'KFC',
        "email" : 'info@kfc.com',
        "image" : '/kfc.jpg',
        "descrption" : 'Lorem Ipsum'
    }
});

这是模型的视图

return Backbone.View.extend({    
    model : optionModel,
    template : _.template(template),
    render : function () {
        this.$el.html(this.template(this.model.attributes));     
        return this;
    }
});

这是选项集合

return Backbone.Collection.extend({
    model : optionModel,
    getQuery : function(){
        //all my query codes
    }
});

选项集合视图render()代码

this.collection.each(function (optionModel) {
    // inserting each options view to an array
    _this._optionsViewArray.push(
        new OptionView({
            model: optionModel
        }).render().el
    );
});
//inserting array to collection view container
_this.$el.html(_this._optionsViewArray);
return this;

我的父视图（表单视图）我在渲染函数后创建，带有下划线 _.wrap 并在该函数内部

//<select>
var _selector = this.$el.find('#organization');

optionsView = new OptionsCollectionView({
    collection : optionsCollection,
    $el: _selector
});
optionsCollection.getQuery();
optionsView.render();

但表单加载完美，选项集合查询成功，但<select> html 上没有任何变化，它没有更新。

【问题讨论】：

什么是_this..？什么是_optionsViewArray..？如果它是一个 javascript 数组，谁告诉你 jQuery html 方法接受一个数组..？请提供minimal reproducible example

标签： backbone.js

【解决方案1】：

您的示例不完整。但是，鉴于 Backbone 和 jQuery 中的获取通常是异步的，最明显的问题是 optionsView.render 将在 optionsCollection 有机会完全加载集合之前运行。你可以通过监听集合更新事件来解决这个问题：

optionsView = new OptionsCollectionView({
    collection : optionsCollection,
   $el: _selector
});
optionsView.listenTo(optionsCollection, 'update', optionsView.render);
optionsCollection.getQuery();

您可以改为收听sync 事件，但收听update 意味着对集合的本地更改也会触发更新您的视图。

您的渲染函数也存在问题，因为您将一组 html 元素传递给 jQuery html 函数。

render: function() {

    var $el = this.$el;

    $el.empty();

    this.collection.each(function (optionModel) {

        var view = new OptionView({ model: optionModel });

        $el.append(view.render().$el);

    });

    return this;

}

但是，您最好使用标准的集合视图模式，或者类似 Backbone.CollectionView - http://rotundasoftware.github.io/backbone.collectionView/

【讨论】：

【解决方案2】：

假设getQuery() 执行异步查询（使用jQuery 或Collection.fetch()），问题（或至少一个问题）是您在查询结果返回之前很快调用optionsView.render()。

你可以抛出一个任意 5 秒的超时来验证这个问题是这样的：setTimeout(function() { optionsView.render(); }, 5 * 1000);，但正确的方法是从 jQuery done 处理函数 ($.ajax({done: function() { ... }})) 调用渲染或者（更好）一个 Backbone sync 事件处理程序（只有当您通过 Backbone 集合 fetch() 进行查询时才会调用它）：optionsCollection.on('sync', function() { ... });

【讨论】：