別のテンプレートイベントでテンプレートを更新する

私は小さな流星アプリを持っています。内部には2つのテンプレートがあり、1つはセレクタ、もう1つはシンプルテキストです。セレクタが変更されるたびに、再描画する2番目のテンプレートを取得したいと思います。私はこれに少し新しく、どんな助けも高く評価されるでしょう。別のテンプレートイベントでテンプレートを更新する

main.htmlを

<head> 
    <title>btn-test</title> 
</head> 

<body> 
    <h1>Welcome to Meteor!</h1> 

    {{> selector}} 
    {{> display}} 
</body> 


<template name="selector"> 
    <select id="carSelector"> 
     <option value="volvo" selected="selected">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
</template> 

<template name="display"> 
    {{selectorValue}} 
</template>

Main.js

import { Template } from 'meteor/templating'; 
import { ReactiveVar } from 'meteor/reactive-var'; 

import './main.html'; 


Template.selector.events({ 
    'change #carSelector': function(event){ 
    return event.currentTarget.value 
    } 
}); 

Template.display.helpers({ 
    "selectorValue": function(){ 
    return $('#carSelector').val(); 
    } 

});

出典

2017-01-26 mcragun

あなたは私はあなたがすでにので、それを使ってみましょうReactiveVarパッケージをインストール参照、選択した値を保存するために反応性のデータソースを使用する必要があります。

import { Template } from 'meteor/templating'; 
import { ReactiveVar } from 'meteor/reactive-var'; 

import './main.html'; 
const selectedValue = new ReactiveVar(''); 

Template.selector.events({ 
    'change #carSelector': function(event){ 
    selectedValue.set(event.currentTarget.value); 
    } 
}); 

Template.display.helpers({ 
    "selectorValue": function(){ 
    return selectedValue.get(); 
    } 

});

出典

2017-01-27 04:37:09 Khang

これはうまくいきます。セッション変数を設定して取得できるようにする、Sessionというパッケージも見ていました。これらの2つの方法は非常によく似ています。両者に大きな違いがありますか？ 1つは好ましいですか？ありがとう！ – mcragun

あなたの状況によって異なりますが、 'Session'がグローバルなスコープを持っているので、あなたがしなければ' Session'を使わないでください。 – Khang

別のテンプレートイベントでテンプレートを更新する

答えて

関連する問題