4

2 つのテンプレートindexがあるとします。メイン コンテンツを含むchangelogテンプレートと、変更ログを含むテンプレートです。これらは異なるテンプレートと見なされます。

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

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

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

これらのテンプレートをその場でプログラム的に変更できるようにするための最良の方法は何ですか? インスタンスのtemplate変数を変更できると考えていましたが、それを変更してもコンテンツは更新されません。理想的には、ユーザーがメニューのボタンをクリックしてとを切り替えられるようにしたいと考えています。Ractiveractive.template = '#changelog';outputindexchangelog

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 に答える