Question

我想反应性地设置HTML <select>元素的值，而不更改元素的各种选项。我找到了一个解决方案，但它并不优雅。

要测试，请使用create meteor select创建一个准系统Meteor应用，并将select.html和select.js文件的内容更改为以下内容：

select.html

<body>
  {{> select}}
</body>

<template name="select">
  <label for="select">{{category}}</label>

  <select id="select">
    <option value='' disabled selected style='display:none;'>Select...</option>
    <option value="Animal">Animal</option> 
    <option value="Vegetable">Vegetable</option>
    <option value="Mineral">Mineral</option>
  </select>
</template>

select.js

if (Meteor.isClient) {
  Session.set("category", "")
  Session.set("label", "Category")

  Template.select.onRendered(function () {
    setSelectValue()
  })

  Template.select.helpers({
    category: function () {
      setSelectValue()
      return Session.get("label")
    }
  });

  function setSelectValue() {
    var select = $("#select")[0]
    if (select) {
      select.value = Session.get("category")
    }
  }
}

现在启动您的应用。在浏览器控制台中，您可以更改category会话变量的值：

Session.set("category", "Animal")

但是，在更改标签之前，select元素不会更新：

Session.set("label", "category") // was "Category'

现在select元素更新，任何后续更改category Session变量也将更新select元素。

Session.set("category", "Vegetable") // Now the select element updates

是否可以直接实现相同的效果，而不使用这种笨拙的解决方法？

Answer 1

是。你可以这样做：

  <select id="select">
    <option value="Animal" {{animalSelected}}>Animal</option> 
    <option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
    <option value="Mineral" {{mineralSelected}}>Mineral</option>
  </select>

看起来像这样的助手：

  Template.select.helpers({
    animalSelected: function () {
      return (someCondition === true) ? 'selected' : '';
    },
    vegetableSelected: function () {
      return (someOtherCondition) ? 'selected' : '';
    }
  });

更好的方法可能是这样的：

  <select id="select">
    {{#each options}}
      <option value="{{value}}" {{selected}}>{{label}}</option> 
    {{/each}}
  </select>

然后你可以在帮助者中使用this来决定选择什么以及什么不是。

另一种选择是使用标准jQuery来更改选择框。像这样：

$('[name=options]').val( 3 );

或this SO answer。

Answer 2

如果您想动态选择集，我通常会使用像这样的手柄助手

# You still need that whitespace to distinguish the second occurrence from first:
$ sed '/instance-1 /,/# Added/s//&104.197.247.254 instance1.com /g' inputFile

然后在html中

Template.newtask.helpers({
  filler: function(element){
    return Session.get(element);
  }
});

使用Meteor

2 个答案: