如何从 Meteor 中的模板助手返回 HTML 选择的选项？

Question

我想我可以像这样返回 HTML 选择元素的选项：

在模板的 .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>
  }
});

...但是在第一个“选项”的开头出现语法错误，构建失败

如果我将选项括在单引号中，则错误为“Unexpected token ILLEGAL”

实现此目的的正确方法是什么？

Answer 1

您可以使用比从模板助手返回 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"
    }, ...];
  }
});

为了简单起见，我们在帮助程序中返回一个硬编码数组，但您也可以返回集合数据。

Answer 2

在您的助手中，您需要将返回值括在引号中。

我会建议以下更改

帮手

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

HTML（在选择标签内）

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

Answer 3

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

如果您需要美国各州（和领地等）以及加拿大各省，您可以在 Meteor 应用程序中按原样使用它，但将“addJobLoc”的模板名称替换为您的模板名称。

我使用完整的地名作为项目的“悬停提示”，并使用两个字母的名称作为内容（选择选项）。

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

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"
    }]
  }
});