ractivejs - 如何使用 Ractive 有条件地选择模板

Question

我正在尝试有条件地选择一个模板。我的想法是，我可以拥有一个包含组件列表的容器（视图），其中每个组件都会说明它应该使用哪个模板。

{{#view.components}}
   {{> {{template.id}} }}
{{/view.components}}

我想要发生的是{{template.id}}从名为 id 的组件属性解析部分声明，然后解析部分声明。

IE

view.components[0].template.id = "fooTemplate" (<script id="fooTemplate" />)
view.components[1].template.id = "barTemplate" (<script id="barTemplate" />)

#view.components并且积极地将块解析为

{{>fooTemplate}}
{{>barTemplate}}

这{{>template.id}}，告诉我它无法解决template.id。这{{>{{template.id}} }}告诉我它对t.

我可以使用任何解决方法吗？

Answer 1

看一下文档：http ://docs.ractivejs.org/latest/partials in "Injecting partials"。

您可以在部分中执行以下操作：

ractive = new Ractive({
  el: myContainer,
  template: myTemplate,
  partials: {
    content: anyBooleanExpression ? fooTemplate: barTemplate,        
  }
});

您可以在模板属性中使用相同的条件：

template: anyBooleanExpression ? fooTemplate: barTemplate,

甚至使用更复杂的条件添加 swich 块或匿名函数。

template: function(){ /* you complex logic */ },

就像在这个小提琴中

Answer 2

您可以如下定义您的模板：

   {{#view.components}}
      {{#FooTemp}}
        {{>fooTemplate}}
      {{/FooTemp}}
      {{#BarTemp}}
        {{>barTemplate}}
      {{/BarTemp}}
    {{/view.components}}

你的模型就像：

{
  view: {
    components: [
      {
        FooTemp: { ... }
      },
      {
        BarTemp: { ... }
      }
    ]
   }
}