Backbone.Marionette嵌套ItemView要么不渲染或渲染“空白”视图/模板

时间:2012-10-23 03:40:29

标签: javascript backbone.js marionette

在导航到特定URL时,将触发一个控制器方法,该方法将ItemView加载到我的应用程序的某个区域中。这个ItemView本身(父级)将包含一些子ItemViews,在渲染时自动呈现它们。这是父ItemView:

return Backbone.Marionette.ItemView.extend({
    template: Handlebars.compile(template),
    ui: {
        textInput01: "#text-input-01"
    },
    events: {
        // no events yet
    },
    initialize: function() {
        // no init yet
    },
    onRender: function() {
        this.appRoutefinderTextinputItemView = new AppRoutefinderTextinputItemView({parentView: this});

        $(this.ui.textInput01).html(this.appRoutefinderTextinputItemView.render());
    }
});

这是当前唯一的ItemView:

return Backbone.Marionette.ItemView.extend({
    template: Handlebars.compile(template),
    events: {
        // no events yet
    },
    initialize: function() {
        // no init yet
    },
    onRender: function() {
        // no onRender yet
    }
});

出于某种原因,我无法理解,虽然孩子的initializeonRender方法都在触发,并且所有必要的数据似乎都存在,但孩子要么没有被呈现,要么正在以“空白”方式呈现,导致父视图不变。

据我了解,我不需要在孩子身上调用render(),因为在实例化/引用ItemView时暗示了这一点?即使我放弃render()电话,也会产生同样的结果。

我必须假设有一些关于从其他ItemView中渲染ItemViews的东西,我只是缺少了,但是通过文档搜索似乎并没有帮助。

第二个问题是:我是否以适当的方式实例化儿童观点,或者有更好的方法吗?

*编辑 - 因此经过一些实验后,似乎“接受”的解决方案只是让父视图成为一个布局,这是一个扩展的ItemView。这确实有效。但是,我仍然想知道为什么ItemView中的ItemView不起作用。我打算在ItemView上集成一个手写的render()方法,我是这样保留的吗?

1 个答案:

答案 0 :(得分:3)

您的原始代码存在问题:

$(this.ui.textInput01).html(this.appRoutefinderTextinputItemView.render());

骨干视图的render方法不返回呈现的HTML。此方法执行渲染并更新视图的el。此方法的返回值是视图本身。木偶不会改变这种行为。

您需要更改代码以使用视图el填充textInput01。另请注意,this.ui.textInput01已经是jQuery选择的对象,因此您无需再次包装它。


this.appRoutefinderTextinputItemView.render();
this.ui.textInput01.html(this.appRoutefinderTextinputItemView.el);