2012-10-23 76 views
1

在导航到特定URL时,会触发一个控制器方法,该方法会将一个ItemView加载到我的应用程序的某个区域中。这个ItemView本身(父类)将包含一些子ItemView,当它自身呈现时将它们全部渲染。这里的父ItemView控件:Backbone.Marionette嵌套的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()呼叫时,也会得到相同的结果。

我不得不假设从其他ItemViews渲染ItemViews的东西,我只是想念,但通过文档浏览似乎没有帮助。

第二个问题是:我是否以适当的方式实例化子视图,还是有更好的方法来实现?

*编辑 - 所以经过一些尝试,看起来“接受”的解决方案只是使父视图布局,这是一个扩展的ItemView。这确实有用。但是,我仍然想知道为什么ItemView中的ItemView不起作用。我是否打算在ItemView上集成手写的render()方法,我是否保持这种方式?

回答

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); 
+0

Bah,当然!非常感谢Derick,并感谢你在木偶上所做的所有努力。 –