javascript - 如何有效地将相同的选项值分配给 Meteor 中的多个 Select 元素？

Question

我有多个需要包含相同值的 Select 元素。而不是在这种类型的每个 Select 中重复相同的 HTML:

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

...我想使用模板助手来提供这些值，例如:

HTML:

<select class="jobLocCount" id="date1Shift1JobLoc2Count" name="date1Shift1JobLoc2Count">
   {{> jobLocCountVals}}
</select>

JS:

Template.tblScheduler.helpers({
  jobLocCountVals: function() {
  return '<option value="1">1</option>'+
  '<option value="2">2</option>'+
  '<option value="3">3</option>'+
  '<option value="4">4</option>'+
  '<option value="5">5</option>'+
  '<option value="6">6</option>'+
  '<option value="7">7</option>'+
  '<option value="8">8</option>'+
  '<option value="9">9</option>'+
  '<option value="10">10</option>'
  }
});

...或者直接在 HTML 中将选项值分配给该类型的第一个 Select，然后通过 js 分配所有其余的值，类似于(伪代码):

Template.tblScheduler.onRender({
    $('#date1Shift1JobLoc2Count').Items = $('#date1Shift1JobLoc1Count').Items;
    $('#date1Shift1JobLoc3Count').Items = $('#date1Shift1JobLoc1Count').Items;
    . . .
});

我的问题是，哪种方法更好，以及更好的方法到底如何实现(上面只是相当牵强的伪代码)？

Answer 1

如果您想以这种方式进行操作，为什么不在模板助手中返回一个对象数组(实际上 Meteor 光标的工作方式)，并迭代它们呢？您可以对对象进行硬编码，但如果您愿意，也可以在 JS 中创建一个循环来为您执行此操作。

这是一个硬编码示例，因为您似乎需要 1-10 范围内的选项值:

JavaScript 模板助手

  Template.yourTemplate.helpers({
    values: function () {
     return [{value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}, {value: 6},    
      {value: 7}, {value: 8}, {value: 9}, {value: 10}];
    }
  });

HTML 模板

<template name="yourTemplate">
  <select id="whateverYouWant" class="whateverYouWant">
      {{#each values}}
        <option value="{{value}}">{{value}}</option>
      {{/each}}
  </select>
</template>

我选择走这条路线，因为这本质上是 Meteor 在返回 Mongo 查询结果时所做的事情(硬编码值除外)，并利用 Meteor 的 {{#each}} 空格键语法。

作为额外的好处，如果您想使其成为全局模板助手，可用于任何模板，您可以执行以下操作:

Template.registerHelper("selectValues", function() {
         return [{value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}, {value: 6},    
          {value: 7}, {value: 8}, {value: 9}, {value: 10}];
});