4

假设我有两个模板：一个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。

4

2 回答 2

7

动态更改模板是我们正在考虑的未来版本 - 请参阅此 GitHub 线程了解一些背景信息。

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

<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
  }
});
于 2014-06-16T12:52:34.960 回答
3

我不确定我是否同意检查的答案。如果您知道所述模板的 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>

我相信按照“已检查”答案描述的方式进行操作会更复杂，并且需要做更多的工作。

于 2015-10-21T15:01:08.510 回答