如何在Ractive中处理多个模板

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

动态更改模板是我们正在考虑的未来版本 - 请参阅此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
  }
});