我如何从 Meteor 的模板助手中为 HTML select return 选项？

Question

我想我可以 return HTML select 元素的选项，如下所示：

在模板的 .HTML 文件中：

  <select id="stateorprovince" name="stateorprovince">
    {{statesAndProvinces}}
  </select>

在模板的 .js 文件中（目前为虚假数据；至少将替换为美国各州和加拿大各省）：

Template.addJobLoc.helpers({
  statesAndProvinces: function() {
    return
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  }
});

...但在第一个 "option"

的开头出现语法错误，无法构建

如果我用单引号将选项括起来，错误是“意外的令牌非法”

完成此任务的正确方法是什么？

Answer 1

您可以使用这种比从模板助手 returning HTML 更适合的方法：

HTML

<template name="addJobLoc">
  <select id="stateorprovince" name="stateorprovince">
    {{#each statesAndProvinces}}
      <option value="{{value}}">{{label}}</option>
    {{/each}}
  </select>
</template>

JS

Template.addJobLoc.helpers({
  statesAndProvinces: function(){
    return [{
      value: "volvo",
      label: "Volvo"
    },{
      value: "saab",
      label: "Saab"
    }, ...];
  }
});

为了简单起见，我们在这里 return 在帮助程序中使用硬编码数组，但您也可以 return 收集数据。

Answer 2

在您的助手中，您需要将 return 值用引号引起来。

我建议进行以下更改

助手

statesAndProvinces: function(){
    return ["Volvo", "Saab","Mercedes"];
}

HTML（在 select 标签内）

{{#each statesAndProvinces}}
 <option value="{{this}}">{{this}}</option>
{{/each}}

Answer 3

改编 saimeunt 接受的答案，这就是我最终得到的（只是为了展示完整的代码）。

如果你想要两者 U.S。州（和领土等）加上加拿大各省，您可以按原样在您的 Meteor 应用程序中使用它，除了将 "addJobLoc" 的模板名称替换为您的模板名称。

我使用完整的地名作为项目的 "hover hint"，并使用两个字母的名称作为内容（select 选项）。

我从 wholypantalones 那里得到了 JSON 个州和省的列表（伟大的绰号，primo！）here。

HTML:

<select id="stateorprovince" name="stateorprovince">
    {{#each statesAndProvinces}}
      <option title="{{hint}}">{{abbrcode}}</option>
    {{/each}}
</select>

JavaScript（*.js 文件中的助手）：

Template.addJobLoc.helpers({
  statesAndProvinces: function() {
    return [{
      "hint": "Alabama",
      "abbrcode": "AL"
    }, {
      "hint": "Alaska",
      "abbrcode": "AK"
    }, {
      "hint": "American Samoa",
      "abbrcode": "AS"
    }, {
      "hint": "Arizona",
      "abbrcode": "AZ"
    }, {
      "hint": "Arkansas",
      "abbrcode": "AR"
    }, {
      "hint": "British Columbia",
      "abbrcode": "BC"
    }, {
      "hint": "California",
      "abbrcode": "CA"
    }, {
      "hint": "Colorado",
      "abbrcode": "CO"
    }, {
      "hint": "Connecticut",
      "abbrcode": "CT"
    }, {
      "hint": "Delaware",
      "abbrcode": "DE"
    }, {
      "hint": "District Of Columbia",
      "abbrcode": "DC"
    }, {
      "hint": "Federated States Of Micronesia",
      "abbrcode": "FM"
    }, {
      "hint": "Florida",
      "abbrcode": "FL"
    }, {
      "hint": "Georgia",
      "abbrcode": "GA"
    }, {
      "hint": "Guam",
      "abbrcode": "GU"
    }, {
      "hint": "Hawaii",
      "abbrcode": "HI"
    }, {
      "hint": "Idaho",
      "abbrcode": "ID"
    }, {
      "hint": "Illinois",
      "abbrcode": "IL"
    }, {
      "hint": "Indiana",
      "abbrcode": "IN"
    }, {
      "hint": "Iowa",
      "abbrcode": "IA"
    }, {
      "hint": "Kansas",
      "abbrcode": "KS"
    }, {
      "hint": "Kentucky",
      "abbrcode": "KY"
    }, {
      "hint": "Louisiana",
      "abbrcode": "LA"
    }, {
      "hint": "Maine",
      "abbrcode": "ME"
    }, {
      "hint": "Manitoba",
      "abbrcode": "MB"
    }, {
      "hint": "Marshall Islands",
      "abbrcode": "MH"
    }, {
      "hint": "Maryland",
      "abbrcode": "MD"
    }, {
      "hint": "Massachusetts",
      "abbrcode": "MA"
    }, {
      "hint": "Michigan",
      "abbrcode": "MI"
    }, {
      "hint": "Minnesota",
      "abbrcode": "MN"
    }, {
      "hint": "Mississippi",
      "abbrcode": "MS"
    }, {
      "hint": "Missouri",
      "abbrcode": "MO"
    }, {
      "hint": "Montana",
      "abbrcode": "MT"
    }, {
      "hint": "Nebraska",
      "abbrcode": "NE"
    }, {
      "hint": "Nevada",
      "abbrcode": "NV"
    }, {
      "hint": "New Brunswick",
      "abbrcode": "NB"
    }, {
      "hint": "New Hampshire",
      "abbrcode": "NH"
    }, {
      "hint": "New Jersey",
      "abbrcode": "NJ"
    }, {
      "hint": "New Mexico",
      "abbrcode": "NM"
    }, {
      "hint": "New York",
      "abbrcode": "NY"
    }, {
      "hint": "Newfoundland and Labrador",
      "abbrcode": "NL"
    }, {
      "hint": "North Carolina",
      "abbrcode": "NC"
    }, {
      "hint": "North Dakota",
      "abbrcode": "ND"
    }, {
      "hint": "Northern Mariana Islands",
      "abbrcode": "MP"
    }, {
      "hint": "Nova Scotia",
      "abbrcode": "NS"
    }, {
      "hint": "Northwest Territories",
      "abbrcode": "NT"
    }, {
      "hint": "Nunavut",
      "abbrcode": "NU"
    }, {
      "hint": "Ohio",
      "abbrcode": "OH"
    }, {
      "hint": "Oklahoma",
      "abbrcode": "OK"
    }, {
      "hint": "Ontario",
      "abbrcode": "ON"
    }, {
      "hint": "Oregon",
      "abbrcode": "OR"
    }, {
      "hint": "Palau",
      "abbrcode": "PW"
    }, {
      "hint": "Pennsylvania",
      "abbrcode": "PA"
    }, {
      "hint": "Prince Edward Island",
      "abbrcode": "PE"
    }, {
      "hint": "Puerto Rico",
      "abbrcode": "PR"
    }, {
      "hint": "Quebec",
      "abbrcode": "QC"
    }, {
      "hint": "Rhode Island",
      "abbrcode": "RI"
    }, {
      "hint": "Saskatchewan",
      "abbrcode": "SK"
    }, {
      "hint": "South Carolina",
      "abbrcode": "SC"
    }, {
      "hint": "South Dakota",
      "abbrcode": "SD"
    }, {
      "hint": "Tennessee",
      "abbrcode": "TN"
    }, {
      "hint": "Texas",
      "abbrcode": "TX"
    }, {
      "hint": "Utah",
      "abbrcode": "UT"
    }, {
      "hint": "Vermont",
      "abbrcode": "VT"
    }, {
      "hint": "Virgin Islands",
      "abbrcode": "VI"
    }, {
      "hint": "Virginia",
      "abbrcode": "VA"
    }, {
      "hint": "Washington",
      "abbrcode": "WA"
    }, {
      "hint": "West Virginia",
      "abbrcode": "WV"
    }, {
      "hint": "Wisconsin",
      "abbrcode": "WI"
    }, {
      "hint": "Wyoming",
      "abbrcode": "WY"
    }, {
      "hint": "Yukon",
      "abbrcode": "YT"
    }]
  }
});

我如何从 Meteor 的模板助手中为 HTML select return 选项？

How can I return options for an HTML select from a Template Helper in Meteor?

meteor

meteor-blaze

meteor-helper