流星のヘルパーがデータを設定していません

Question

私はテンプレートonRenderedフックで画像配列を取得し、スライダーの作成のためにこれらの画像をヘルパーで取得する必要があります。このスライダは、モーダルが開いているときに作成する必要があります。しかし、このコードを実行すると、ヘルパーはテンプレートにデータを送信しません。 console.log（私はこの配列を見ることができます）。 私はこのコードを持っている：あなたのヘルパーはそれだけで動作します理由です、任意の反応性の変数に依存しない

<ul id="vertical" class="light_slider"> 
    {{#each images}} 
      <li data-thumb="{{this}}"> 
       <img src="{{this}}" style="height:100%"/> 
     </li> 
    {{/each}} 
</ul> 

Answer 1

：

Template.slider.onRendered(function() { 

    this.autorun(()=> { 
     let mainImg = this.data.mainImage || null; 
     let imgs = this.data.images || []; 

     this.data.imgSet = Images 
      .find({_id: { $in: [mainImg, ...imgs] }}) 
      .map(img => img.url()); 
    }); 
}); 

とヘルパー：

Template.slider.helpers({ 
    images() { 
     let imgSet = this.imgSet; 

     if(imgSet) { 
      const slider = $('#vertical').lightSlider({ 
       gallery: true 

      }); 

      return this.imgSet; 
     } 

     return []; 
    } 
}); 

私のテンプレートファイルをあなたの​​変数の更新にかかわらず、一度。

あなたが望むものを得るには、反応変数を作り、それを更新する必要があります。

このような何か：

Template.slider.onRendered(function() { 

    this.imgSet = new ReactiveVar([]); 

    this.autorun(()=> { 
     const mainImg = this.data.mainImage || null; 
     const imgs = this.data.images || []; 

     const imgSet = Images 
      .find({_id: { $in: [mainImg, ...imgs] }}) 
      .map(img => img.url()); 

     this.imgSet.set(imgSet); 
    }); 
}); 

Template.slider.helpers({ 
    images() { 
     const imgSet = Template.instance().imgSet.get(); 

     if(imgSet) { 
      // let's give render the time to rerender 
      // though I'd recommend to put that into onRendered 
      Meteor.setTimeout(() => { 
       $('#vertical').lightSlider({ 
        gallery: true 
       }); 
      }, 50); 

      return imgSet; 
     } 

     return []; 
    } 
});