Templates 使用主干/木偶/下划线模板嵌入部分模板

在带下划线模板的木偶中，是否可以将一个模板文件“包含”到另一个模板文件中，以便在多个模板之间共享公共标记

我们使用requireJS在何时加载.tpl文件，然后将tpl文件分配给木偶视图

  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>

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

  <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>
  <button class='btn-one'>One</button> 
  <button class='btn-two'>Two</button>
  <button class='btn-three'>three</button>

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

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

父视图
{{child_template.tpl}}

“child_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>

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

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

1
两个
三

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

---

有什么想法吗？

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

使用requirejs按常规加载部分模板。 然后通过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>

这是可以访问父数据的子级

对我来说，在模板中包含模板很奇怪。 您可以将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>

父视图

我不熟悉木偶，但下划线模板设计得非常简单，根本不包含任何逻辑（包括“嵌入”机制）。如果你使用了一个更高级的模板系统，比如说车把，你可以使用你自己的包含“助手”或者像这样的预建模板。