メーターでマイコードによって生成されたヘルパープロパティを出力できません

いくつかの州名を含むドロップダウンリストを作成しようとしています。私はまた、ユーザが選択した州の都市をリストアップする別のドロップダウンリストを持っています。
あなたはヘルパーに見られるように、私は州のリストを持っており、それらにアクセスしてそれらをドロップダウンリストにリストすることができます。今、都市をリストするために、これは私がやりたいことです...私はデフォルトで空の '都市'というヘルパーを持っています。イベントでは、変更イベント（On provinceID）を作成しました...ユーザーがドロップダウンのオプションを変更するたびにこのイベントが実行されます...スイッチを使用して、選択された都市が 'Tehran'ヘルパーはcityHolder配列で埋められます。問題は、ドロップダウンリストに表示されていないことです。
これは、main.jsファイル内のコード
の一部です：メーターでマイコードによって生成されたヘルパープロパティを出力できません

Template.body.helpers({ 
/* #### LIST OF IRAN PROVINCES #### */ 
province: [ 
    {provinceName: 'Select the Province...', callingCode: ''}, 
    {provinceName: 'Tehran', callingCode: '021'}, 
    {provinceName: 'Yazd', callingCode: '352'}, 
    {provinceName: 'Gilan', callingCode: '131'} 
], 
city: [], 
}); 

Template.body.events({ 
    'change #provinceID'(event, template) 
{ 
    // ** Holds the value of the province dropdown ** 
    var provinceInputValue = document.getElementById('provinceID').value; 
    // ** Checks which province has been selected ** 
    switch (provinceInputValue) { 

     // #### 1. TEHRAN #### 
     case 'Tehran': 

      // ** List of Tehran cities ** 
      cityHolder = [ 
       {cityName: 'Tehran'}, 
       {cityName: 'Robat Karim'}, 
      ]; 
       for (var a = 0; a < cityHolder.length; a++) { 
       Template.body.__helpers[" city"][a] = cityHolder[a]; 
      } 
      break;

そして、これはmain.htmlをファイルです：メニューをカスケード接続するための一般的なパターンを設定することです

<body> 
<select id="provinceID"> 
    {{#each province}} 
     {{> provinceTemplate}} 
    {{/each}} 
</select> 
<select id="cityID"> 
    {{#each city}} 
     {{> cityTemplate}} 
    {{/each}} 
</select> 
</body> 

<template name="provinceTemplate"> 
    <option value="{{provinceName}}" label="{{provinceName}}"></option> 
</template> 


<template name="cityTemplate"> 
    <option value="{{cityName}}" label="{{cityName}}"></option> 
</template>

出典

2016-11-23 Amirhosein Al

a Session変数を変更し、それに基づいて従属メニューを（反応的に）入力します。

Template.body.helpers({ 
    province(){ 
    return 
     [ 
     {provinceName: 'Select the Province...', callingCode: ''}, 
     {provinceName: 'Tehran', callingCode: '021'}, 
     {provinceName: 'Yazd', callingCode: '352'}, 
     {provinceName: 'Gilan', callingCode: '131'} 
     ]; 
    }, 
    city(){ 
    switch (Session.get('provinceInputValue')) { 
     case 'Tehran': 
     cityHolder = [ 
      {cityName: 'Tehran'}, 
      {cityName: 'Robat Karim'}, 
     ]; 
     break; 
    } 
    return cityHolder; 
    } 
}); 

Template.body.events({ 
    'change #provinceID'(event, template){ 
    let provinceElement = document.getElementById('provinceID'); 
    if (provinceElement) Session.set('provinceInputValue',provinceElement.value); 
    } 
});

キーはSessionは、セッション変数の値が（このケースでは都市のあなたのリストを返す関数）に依存するコードを更新されたときに更新するように強制されるように反応であるということです。

出典

2016-11-23 17:09:15

次に、テンプレート宣言がどのように変更されるのですか？ @MichelFloyd –

"テンプレートヘルパーの例外：TypeError：プロパティ 'value' of nullを読み取ることができません"コードを変更する...これは私が得るものです...なぜですか？ –

DOMの準備が整う前に実行されている可能性があります。更新されたコードをご覧ください。 –

メーターでマイコードによって生成されたヘルパープロパティを出力できません

答えて

関連する問題