使用流星创建一个 html 下拉菜单答案

【问题标题】：Creating an html dropdown menu using meteor使用流星创建一个 html 下拉菜单
【发布时间】：2017-04-04 18:54:23
【问题描述】：

我正在尝试使用流星创建一个 html 下拉菜单。
我创建了一个选择元素，然后使用助手尝试在下拉列表中列出省份名称。这是 main.html

<template name="signup">   
    <select>
        {{#each province}}
            {{> provinceTemplate}}
        {{/each}}
    </select>
</template>

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

这是 main.js

Template.body.helpers({
  province:[
    {provinceName: 'Tehran'},
    {provinceName: 'Isfahan'},
    {provinceName: 'Yazd'},
    {provinceName: 'Shiraz'},
    {provinceName: 'Kerman'},
  ],
});

我只是使用助手来塑造下拉菜单。
但是当我运行它的时候，select标签里面什么都没有。

谢谢你们……

【问题讨论】：

现在我知道出了什么问题，问题是您在body 模板中定义了您的province 助手，但您在signup 模板中使用了它。将 province 助手移动到 signup 模板

标签： html templates meteor meteor-blaze

【解决方案1】：

试试这个代码：

Template.body.helpers({
  province() {
    return [
      {provinceName: 'Tehran'},
      {provinceName: 'Isfahan'},
      {provinceName: 'Yazd'},
      {provinceName: 'Shiraz'},
      {provinceName: 'Kerman'},
    ];
  },
});

【讨论】：

不...没有帮助！ @Khang
您在浏览器控制台上看到任何错误消息吗？也许让我们尝试在 province 辅助函数中放置一个 console.log 来检查它是否真的运行
该函数存在并包含对象（省名），但下拉列表再次不包含任何名称并且为空。 @khang
您能否编辑问题以包含完整的main.html 文件？似乎问题有所不同。我只是检查了 Blaze 文档并意识到 helper 可以是一个值，所以你的 main.js 很好。我需要更新我的 Blaze 技能，它似乎最近更新了

【解决方案2】：

我找到了答案...您不应该在另一个模板中调用模板（{{> TemplateName}}）...只要我从第一个模板中取出我的代码，它就开始工作了。下面的代码是错误的...

    <body>
        {{> firstTemplate}}
    </body>

    <template name="firstTemplate">
        ...
        {{> secondTemplate}}
        ...
    </template>

    <template name="secondTemplate">
        ...
    </template>

而下面的代码工作......

<body>
    ...
    {{> secondTemplate}}
    ...
</body>
<template name="secondTemplate">
    ...
</template>

【讨论】：

【解决方案3】：

您是否在 <body> 中调用 <select> ？这应该有效：

Main.html

<body>

<select>
  {{#each province}}
  {{> provinceTemplate}}
  {{/each}}
</select>

</body>

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

Main.js

Template.body.helpers({
  province:[
    {provinceName: 'Tehran'},
    {provinceName: 'Isfahan'},
    {provinceName: 'Yazd'},
    {provinceName: 'Shiraz'},
    {provinceName: 'Kerman'},
  ];
});

【讨论】：