0

私は流星で作業しており、リアクティブ変数を使用してメインパネルのコンテンツを 2 つのタブ間で切り替えようとしています。私はそれ自体でコンテンツを正常にテストできたので、問題はリアクティブな var コードにあると確信しています。具体的には、問題はタブの function() にあると思いますが、多くの検索とドキュメントを読んだ後、解決策が見つかりませんでした。

関連する js:

Template.content.onCreated( function() {
   this.currentTab = new ReactiveVar('form');
});

Template.content.helpers({
   tab: function() {
       return Template.instance().currentTab.get();
   }
});

Template.content.events({
  'click .nav li': function (event, template) {
      var currentTab = $( event.target ).closest( "li" );

      currentTab.addClass( "active" );
      $( ".nav li" ).not( currentTab ).removeClass( "active" );

      Template.currentTab.set();
  }
});

関連する html:

<template name ="content">
    <ul class ="nav">
        <li data-template="form"><a href="#">Form</a></li>
        <li data-template="results"><a href="#">Results</a></li>
    </ul>
    {{ > Template.dynamic template=tab}}
</template>
4

1 に答える 1

0 
{{ > Template.dynamic template=tab}}

これはヘルパーを呼び出して、tabここに表示したいテンプレートの名前である文字列を取得しています。currentTabの値を「フォーム」に設定することから始めるため、初めて機能するはずです。

表示されるテンプレートを変更するには、値をcurrentTab新しいテンプレートの名前に一致する文字列に変更する必要があります。あなたはそれをしていません。

Template.currentTab.set();

これは、あなたがそれを行うべき場所です。代わりに、存在しないと思われるset()のcurrentTabプロパティを呼び出しています。大文字の T は Meteor オブジェクトであり、参照しようとしているテンプレート インスタンスではありません。に新しい値を設定するには、実際に値を指定する必要があります。そのようです：TemplateTemplatecurrentTab

Template.content.events( {
    'click .nav li': function(event, instance) {
        //logic to decide which template you want to show
        //and put the name of that template in templateName

        instance.currentTab.set(templateName)
    }
});
于 2016-11-04T19:36:41.940 に答える