Question

我正在尝试创建一个包含一些省名的下拉列表。我还有另一个下拉列表，其中列出了用户选择的省份的城市正如您在帮助器中看到的那样，我有省份列表，我可以访问它们并在下拉列表中列出它们。现在列出城市，这就是我要做的事情...我有一个名为'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>

Answer 1

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

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

1 个答案: