2016-11-23 5 views
0

Я пытаюсь создать раскрывающийся список, который содержит некоторые названия провинций. У меня также есть другой раскрывающийся список, в котором перечислены города провинции, которую выбрал пользователь.
Как вы видите в помощниках, у меня есть список провинций, и я могу получить к ним доступ и перечислить их в раскрывающемся списке. Теперь для перечисления городов это то, что я собираюсь сделать ... У меня есть помощник с именем «город», который по умолчанию пуст. В событиях я создал событие изменения (On provinceID) ... Всякий раз, когда пользователь меняет опцию выпадающего списка, это событие запускается ... Используя переключатель, если выбранный город является «Тегеран», например, город помощник заполняется массивом cityHolder. Проблема в том, что она не указана в раскрывающемся списке.
Это часть кода
В main.js файле:Не удается получить вспомогательные свойства, которые генерируются моим кодом в Meteor

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> 

ответ

2

Общий шаблон для каскадного меню, чтобы установить 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 является реактивный так, что, когда значение переменной сеанса обновляется зависимый код (в данном случае функцию, которая возвращает список городов) вынужден обновить.

+0

Тогда как объявление шаблона изменится? @MichelFloyd –

+0

«Исключение в помощнике шаблона: TypeError: Невозможно прочитать значение свойства« null »Изменяя код ... Это то, что я получаю ... Почему? –

+0

Возможно работает до того, как DOM готов. См. Обновленный код. –