Question

在带有下划线模板的Marionette中，是否可以将一个模板文件“包含”到另一个模板文件中 - 这样可以在多个模板之间共享通用标记？

我们使用requireJS来加载.tpl文件 - 然后 - 然后将tpl文件分配给Marionette视图;

  View.MyView = Marionette.ItemView.extend({
        template: 'parent_template.tpl'
  });

'parent_template.tpl'包含类似的内容。

  <h1>A Parent View</h1>
  <button class='btn-one'>One</button> 
  <button class='btn-two'>Two</button>
  <button class='btn-three'>three</button>

我想要做的是将按钮说成一个普通的tpl，其他tpl可以使用，类似......

'parent_template.tpl'包含类似的内容。

  <h1>A Parent View</h1>
   {{child_template.tpl}}

'child_template.tpl'包含类似的内容。

  <button class='btn-one'>One</button> 
  <button class='btn-two'>Two</button>
  <button class='btn-three'>three</button>

然后许多其他模板可以拉入共享模板。

有什么想法吗？

Answer 1

我解决这个问题的方法是使用templateHelpers。

按需使用JS加载部分模板。然后通过templateHelper将对子模板的引用传递给父模板;

define(['tpl!parent.tpl', 'tpl!child.tpl'], function (ParentTemplate, ChildTemplate) {

   View.MyView = Marionette.View.extend({
      template: ParentTemplate,
      templateHelpers: function() {
        return {
          childTpl: ChildTemplate
        }
      }
    });
}

父模板通过帮助程序包含子项

<h1>parent template</h1>
<%= childTpl(obj) %>

如果您传递'obj' - 模板模型

，孩子可以访问数据

<h2>this is the child, that can access the parent data <%= title %></h2>

Answer 2

对我而言，包含模板中的模板气味很奇怪。您可以使用Mariontte.LayoutView和子视图：

按钮子视图：

Buttons = Marionette.ItemView.extend({
         template: 'child_template.tpl'
});

布局：

MyView = Marionette.LayoutView.extend({
         template: 'parent_template.tpl',
         region : {
              buttonRegion : '.myButtonsRegion'
         },
         onShow : function(){
              var buttons = new Buttons();
              this.buttonRegion.show(buttons);
         }
});

然后是parent_template.tpl：

<h1>A Parent View</h1>
<div class="myButtonsRegion"></div>

使用Backbone / Marionette / Underscore模板嵌入部分模板

2 个答案: