Question

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

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

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

即

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

和ractive将#view.components块解析为

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

此{{>template.id}}告诉我它无法解决template.id。这个{{>{{template.id}} }}告诉我它对t没有任何了解。

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

Answer 1

在“注入部分内容”中查看文档：{{3}}。

你可以在部分中做这样的事情：

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

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

template: anyBooleanExpression ? fooTemplate: barTemplate,

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

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

就像这个http://docs.ractivejs.org/latest/partials

一样

Answer 2

您可以按以下方式定义模板：

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

你的模型就像：

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

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

2 个答案: