模板两个模型在一个视图-骨干/木偶

Template two models in one view - Backbone/Marionette

本文关键字:视图 骨干 木偶 一个 模型 两个      更新时间:2023-09-26

我试图在一个视图中使用两个模型,并使用它们的模板。我在和木偶一起工作。下面是视图的初始化:

main_app_layout.header.show(new APP.Views.HeaderView({
 model: oneModel,
 model2 : twoModel}
));

这是我的观点:

APP.Views.HeaderView = Backbone.Marionette.ItemView.extend({
    template : '#view_template',
    className: 'container',

    initialize: function() {
               //This correctly logs the second model
                console.log(this.options.model2);
    }
});

模板如下:

 <script id="view_template" type="text/template">
        <p>{{twoModel_label}} {{oneModel_data}}</p>
        <p>{{twoModel_label2}} {{oneModel_data2}}</p>
    </script>

它使用oneModel数据正确渲染所有内容,但不渲染第二个,即使它正确记录它。我使用Mustache作为我的模板语言。

有人能帮忙吗?

你可以在视图上重写serializeData方法,并让它返回两个模型的数据:


APP.Views.HeaderView = Backbone.Marionette.ItemView.extend({
  // ...
  serializeData: function(){
    return {
      model1: this.model.toJSON(),
      model2: this.options.model2.toJSON()
    };
  }
});

那么你的模板看起来像这样:

<script id="view_template" type="text/template">
    <p>{{model1.label}} {{model1.data}}</p>
    <p>{{model2.label}} {{model2.data}}</p>
</script>

尝试创建一个包含两个模型的复杂模型,这个新模型将有另外两个作为属性,您可以访问每个模型的属性,就像这个答案解释的那样…

访问Mustache模板中嵌套的骨干模型属性