この流星コードをどのように反応させることができますか？

Question

私はいくつかの '複数の'セレクタを持っていますが、この例では2つのセレクタがあります。

<form class="input-field col s10"> 
    <select multiple id="jans-room21"> 
    <option value="" disabled selected>Add Names</option> 
    {{#each Jans21}} 
     <option value= '{{FullName}}' selected = {{formatSelectedNames21 RoomJans}} >{{FullName}}</option> 
    {{/each}} 
    </select> 
</form> 

<form class="input-field col s10"> 
    <select multiple id="jans-room22"> 
    <option value="" disabled selected>Add Names</option> 
    {{#each Jans22}} 
     <option value='{{FullName}}' selected = {{formatSelectedNames22 RoomJans}}>{{FullName}}</option> 
    {{/each}} 
    </select> 
</form> 

Jans21とJans22は、DBからいくつかのドキュメントを返しています。その部屋の選択された名前、または 'RoomJans'プロパティがないか、 'RoomJans'が ''と等しい名前が表示されます。他のセレクターで選択された名前は除外されます。

Template.jansNameSelect.helpers({ 
    Jans21: function() { 
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['21A', '21B'] }}]}]}, { sort: { FullName: 1 }}).fetch(); 
    }, 

    Jans22: function() { 
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['22A', '22B'] }}]}]}, { sort: { FullName: 1 }}).fetch(); 
    } 
}); 

ボタンをクリックすると、この方法は、DBを更新し、それらの名前を格納するために呼び出されます。私は後だ何

​​

を名前に第1セレクタで選択し、その後、データベースに保存されている場合、第2のセレクタは、最初から選択されたそれらの名前を削除するには名前のリストを更新しますです。最初のセレクタから名前を選択してDBに保存した場合、 'Jans22'関数が再度起動するようなデータベースアクションを実行しているので、これは反応的であると考えていました。しかし、そうではありません。ただし、更新時に正しい名前がロードされます。これを反応させる方法はありますか？

Answer 1

Meteorテンプレートの上にUIコンポーネントフレームワークを使用する場合は、その下のテンプレートが変更されたときにフレームワークに通知する必要があります。これは、フレームワーク（この場合はマテリアライズ）がテンプレートとしてレンダリングされた<select>を入力として使用してから、新しいDOMエレメントのセットを作成して、目的のUIのルック・アンド・フィールをレンダリングするためです。 <option>が変更された場合、このプロセスを再実行するようにフレームワークに指示する必要があります。あなたが再実行

$('select').material_select(); 

変更があるたびにする必要があり、この場合には

。私の意見でこれを行う最も簡単な方法は、ヘルパー自体からの遅延関数を使用することです。

Template.jansNameSelect.helpers({ 
    Jans21: function() { 
    Meteor.defer(function() { $('select#jans-room21').material_select(); }); 
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['21A', '21B'] }}]}]}, { sort: { FullName: 1 }}).fetch(); 
    }, 

    Jans22: function() { 
    Meteor.defer(function() { $('select#jans-room22').material_select(); }); 
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['22A', '22B'] }}]}]}, { sort: { FullName: 1 }}).fetch(); 
    } 
});