初始渲染时未显示主干.js 子视图答案

【问题标题】：backbone.js subview not shown on initial render初始渲染时未显示主干.js 子视图
【发布时间】：2014-05-23 16:37:15
【问题描述】：

我有一个看法：

App.Views.Rebill = App.Views.baseView.extend({
    view: 'requests._rebill_line',
    tag: 'div',
    className: 'row row-spaced',

    render: function() {
        var self = this;
        App.get_view(self.view).done(function(data){
            var view = Mustache.render(data, {
                text: self.model.get('text'),
                cost: self.model.get('cost')
            });

            self.$el.append(view);

            var $selectVat = self.$el.find('select[name="vat"]');
            var vatPicker = new App.Views.VatPicker({
                model: self.model,
                el: $selectVat
            });
            vatPicker.render();
        });
        return self;
    }
});

这个视图是在父视图中创建的：

addRebillLine: function(rebillModel){
    var self = this;
    var rebillView = new App.Views.Rebill({
        model: rebillModel
    });
    self.$el.after(rebillView.render().$el);
},

我已将此链接到一个按钮，该按钮创建一个空模型，并调用addRebillLine 函数。这很好用，当我单击按钮时，新的 Rebill 视图会出现在 DOM 中。

但是，在渲染父视图时，我运行一个 json 数组，为每一行创建一个模型，并使用该模型调用 addRebillLine 函数。这会运行，但不会将 Rebill 视图添加到 DOM。

进一步说，父视图本身就是一个子视图，并且像这样附加到它的父视图：

this.$el.find('[data-role="repair-items"]').append(itemView.render().$el);

父视图和祖父视图同步渲染，子视图异步渲染（App.get_view() 基本上是对 $.ajax 的调用，因此是 .done()）

奇怪的是，我在其他几个地方对 App.Views.VatPicker 视图做了同样的事情，而且效果很好。唯一的区别是我将要附加的元素传递到 VatPicker 视图中。但是，如果我将父 $el 元素传入，并在我的 done() 回调中运行 this.$parent.after(self.$el)，那也不起作用。

【问题讨论】：

我通过添加一个由 done() 函数调用的回调并将子 $el 添加到父 $el 来解决问题。但是我还是不明白为什么上面的代码不渲染。

标签： javascript backbone.js backbone-views

【解决方案1】：

当您拨打此行时：

this.$el.find('[data-role="repair-items"]').append(itemView.render().$el);

它假定您的渲染代码是同步的（应该是同步的），但您的渲染代码不是。当渲染返回 $el 尚未设置时，这是您设计中的问题。

您应该通过在视图需要时提供模板来解决此设计问题。不要在这里发明轮子，看一下 TodoMVC 主干示例。

如果你想加载你的模板，请使用 requirejs。

【讨论】：