Question

我们说我有两个模板：一个index模板包含我的主要内容，一个changelog模板包含更改日志。它们被认为是不同的模板：

<script id='index' type='text/ractive'>
// ...
</script>

<script id='changelog' type='text/ractive'>
// ...
</script>

ractive = new Ractive({...});

能够动态地以编程方式在这些模板之间进行更改的最佳方法是什么？我原以为我可以更改template实例的Ractive变量，即ractive.template = '#changelog';，但更改不会更新output内容。理想情况下，我喜欢它，以便用户可以点击菜单中的按钮并在index和changelog之间切换。

Answer 1

我们正在考虑动态更改模板以供将来发布 - 请参阅this GitHub thread了解某些背景信息。

目前，实现这一目标的最佳方式是：

<script id='main' type='text/ractive'>
  {{# page === 'index' }}
    {{>index}}
  {{/}}

  {{# page === 'changelog' }}
    {{>changelog}}
  {{/}}
</script>

<script id='index' type='text/ractive>...</script>
<script id='changelog' type='text/ractive>...</script>

然后，在您的应用内，ractive.set('page', 'changelog')隐藏索引模板并显示更改日志。

如果您想在不加载<script>个标签的情况下执行此操作，则可以设置如下选项：

ractive = new Ractive({
  /* other options... */
  template: mainTemplate,
  partials: {
    index: indexTemplate,
    changelog: changelogTemplate
  }
});

Answer 2

我不确定我是否同意经过检查的答案。如果您知道所述模板的ID，则有一种更简单的方法来更改模板。在ractive中有一个称为“resetTemplate”的简洁功能，它允许您更改给定ractive对象的模板。就这样：

var rxObject = new Ractive({
  el: '#element',
  template: '#template_1'
});

//what you can do at any point in your code is call ractive.resetTemplate, as such:

rxObject.resetTemplate('#template_2');

<script id="template_1" type="text/html">
  
  //content of this script
  
</script>

<script id="template_2" type="text/html">
  
  //content of this script
  
</script>

我相信它更复杂，而且更多的工作就像'检查'答案所描述的那样。

如何在Ractive中处理多个模板

2 个答案: