无法输出由Meteor中的代码生成的辅助属性

时间:2016-11-23 16:34:27

标签: meteor meteor-blaze

我正在尝试创建一个包含一些省名的下拉列表。我还有另一个下拉列表,其中列出了用户选择的省份的城市 正如您在帮助器中看到的那样,我有省份列表,我可以访问它们并在下拉列表中列出它们。现在列出城市,这就是我要做的事情...我有一个名为'city'的帮助器,默认为空。在事件中,我创建了一个更改事件(在省际ID上)...每当用户更改下拉列表的选项时,此事件就会运行...使用开关,如果所选城市是“德黑兰”,例如,城市helper由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>

1 个答案:

答案 0 :(得分:2)

级联菜单的常见模式是在主菜单更改时设置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被动,这样当会话变量的值被更新时,依赖代码(在这种情况下是返回城市列表的函数)被强制更新。