Backbone.js BackboneJS嵌套视图未渲染

我在lightbox中有backbonejs表单，html作为子视图。 对于从服务器加载的select数据，我有单独的模型和集合用于此select

这是模型的视图

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
    }
});

选项集合视图渲染代码

我的父视图表单视图是我在渲染函数后创建的，在该函数内带有下划线ux.wrap

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

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

但是表单正在完美加载，选项集合查询成功，但html上没有任何更改，它不会更新。

假设getQuery使用jQuery或collection.fetch执行异步查询，问题或至少一个问题是您正在调用optionView.render以尽快，在查询结果返回之前

---

您可以抛出一个任意的5秒超时来验证这是否是这样的问题：setTimeoutfunction{optionView.render；}，5*1000；，但正确的方法是从jQuery完成处理程序函数$.ajax{done:function{…}}或更好的主干同步事件处理程序调用render。只有通过主干集合fetch执行查询时，才会调用此函数：optionCollection.on'sync'，function{…}

你的例子不完整。但是，考虑到回迁在主干和jQuery中通常是异步的，最明显的问题是optionsView.render将在optionCollection有机会完全加载集合之前运行。您可以通过侦听集合更新事件来解决此问题：

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

您可以改为侦听同步事件，但侦听更新意味着对集合的本地更改也将触发更新视图

在将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;

}

但是，您最好使用标准的集合视图模式，或者类似主干的东西。集合视图-

这是什么。。？什么是_options查看阵列。。？如果它是一个javascript数组，谁告诉过你jQueryHTML方法接受数组。。？请提供

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

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

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

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;

}