Backbone.Marionette 嵌套的 ItemView 不呈现或呈现“空白”视图/模板答案

【问题标题】：Backbone.Marionette nested ItemView either not rendering or rendering "blank" view/templateBackbone.Marionette 嵌套的 ItemView 不呈现或呈现“空白”视图/模板
【发布时间】：2012-10-23 03:40:28
【问题描述】：

在导航到特定 URL 时，会触发一个控制器方法，它将 ItemView 加载到我的应用程序的一个区域中。这个 ItemView 本身（父级）将包含一些子 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
    }
});

由于某种原因，我无法理解，尽管子级上的 initialize 和 onRender 方法都在触发，并且所有必要的数据似乎都存在，但是子级要么没有被渲染，要么正在以“空白”方式，导致父视图不变。

据我了解，我不需要在孩子身上调用render()，因为它在实例化/引用 ItemView 时暗示？即使我放弃render() 呼叫，也会得到相同的结果。

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

第二个问题是：我是否以正确的方式实例化子视图，还是有更好的方法？

*EDIT - 所以经过一些试验，似乎“接受”的解决方案只是让父视图成为一个布局，它是一个扩展的 ItemView。这确实有效。但是，我仍然想知道为什么 ItemView 中的 ItemView 不起作用。我是否打算在 ItemView 上集成一个手写的 render() 方法，我要保持这种方式吗？

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

你的原始代码的问题是这一行：

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

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

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


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

【讨论】：

呸，当然！非常感谢，德里克，感谢你为木偶所做的所有辛勤工作。