如何有效地将相同的选项值分配给 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中的option值赋值给这个类型的第一个Select，然后把剩下的都通过js赋值，类似（伪代码）:

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

我的问题是，哪种方法更好，更好的方法具体是如何实现的（以上只是比较牵强的伪代码）？

Answer 1

如果您想这样做，为什么不在模板助手中 return 一个对象数组（实际上是 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>

我选择这条路线是因为当你return Mongo 查询的结果时，它基本上就是 Meteor 正在做的事情，除了硬编码值，并利用 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}];
});

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

How can I efficiently assign the same option values to multiple Select elements in Meteor?

html

javascript

meteor

spacebars