Question

我有一个从数组（从DB）生成的选择框列表。作为简化示例：

Template.home.helpers({
    peers: [
            { name: "Sagar", rating: "3"},
            { name: "Sagar", rating: "3"},
            { name: "Sagar", rating: "3"},
            { name: "Sagar", rating: "3"}
        ]   
});

我遍历peers数组并调用以下模板： HTML：

<template name="ratingInput">

    <div>
        <label for="{{name}}">{{name}} </label>
        <select id="{{name}}">
            <option value="0" disabled selected>Choose rating</option>
            <option value="1" >Still learning</option>
            <option value="2">Can Improve</option>
            <option value="3">Decent</option>
            <option value="4">Extra-ordinary</option>
            <option value="5">Should Mentor</option>
        </select>
    </div>
</template>

有没有办法将变量绑定到每个选择框，如Angular的ng-model。就像文本框一样，我们可以：

我们可以为选择框执行类似的操作。

Answer 1

对于select，您需要使用帮助程序，以便在Blaze中执行双向数据绑定：

Template.ratingInput.helpers({
  isSelected: function(v1, v2) {
    return (v1 === v2);
  }
});

然后，您可以在每个选项中调用isSelected以检查应选择哪个选项：

<template name="ratingInput">
    <div>
        <label for="{{name}}">{{name}} </label>
        <select id="{{name}}">
            <option value="0" disabled>Choose rating</option>
            <option value="1" selected={{isSelected value "1"}}>Still learning</option>
            <option value="2" selected={{isSelected value "2"}}>Can Improve</option>
            <option value="3" selected={{isSelected value "3"}}>Decent</option>
            <option value="4" selected={{isSelected value "4"}}>Extra-ordinary</option>
            <option value="5" selected={{isSelected value "5"}}>Should Mentor</option>
        </select>
    </div>
</template>

要在修改select时修改值，您需要一个事件监听器：

Template.ratingInput.events({
  'change select': function(e, t) {
    var newVal = $(e.target).val();
    // update the value here
  }
});

阅读Blaze here

中有关数据绑定的更多信息

选择框的流星火焰模型等效

1 个答案: