Question

我正在尝试使用knockoutjs显示一组单选按钮。我还希望根据某个值选择一个单选按钮，并知道所选单选按钮的值，以防有人选择不同的项目。

这是我尝试使用的代码：

<form>
    <div data-bind="template: { name: 'items-template', foreach: items }"></div>

    <h3 data-bind="text: selectedItem"></h3>
</form>

</body>
<script type="text/html" id="items-template">
    <input type="radio" name="skuitem" data-bind="value: id, checked: selectedItem"><span data-bind="text: name"></span><br /></input>
</script>
<script type="text/javascript">

    function ItemsViewModel() {

        var _this = this;

        _this.items = ko.observableArray();
        _this.items.push({id: "1", name: "Item A"});
        _this.items.push({id: "7", name: "Item B"});
        _this.items.push({id: "10", name: "Item C"});

        _this.selectedItem = ko.observable("1");
    }

    ko.applyBindings(new ItemsViewModel());
</script>

问题是我在控制台中出错：

ReferenceError: selectedItem is not defined

根据我的理解，knockout会查看items数组中包含的对象＆＃34; selectedItem＆＃34;而不是绑定到＆＃34; selectedItem＆＃34;我的ItemsViewModel中的变量。

当我使用模板时，如何将单选按钮绑定到selectedItem observable？

Answer 1

在模板中，您的绑定上下文为item，您只能id和name可以直接链接。

可以使用ItemsViewModel或$parent访问$root中的所有媒体资源。

所以，你必须写：data-bind="value: id, checked: $parent.selectedItem"

function ItemsViewModel() {

  var _this = this;

  _this.items = ko.observableArray();
  _this.items.push({
    id: "1",
    name: "Item A"
  });
  _this.items.push({
    id: "7",
    name: "Item B"
  });
  _this.items.push({
    id: "10",
    name: "Item C"
  });

  _this.selectedItem = ko.observable("1");
}

ko.applyBindings(new ItemsViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form>
  <div data-bind="template: { name: 'items-template', foreach: items }"></div>

  <h3 data-bind="text: selectedItem"></h3>
</form>

<script type="text/html" id="items-template">
  <label>
    <input type="radio" data-bind="value: id, 
                                   checked: $parent.selectedItem" />
    <span data-bind="text: name"></span>
  </label>
</script>

您可以在模型中解决问题，而不是在视图中解决问题。您可以将对可观察选择的引用传递给每个item：

function ItemsViewModel() {

  var _this = this;

  _this.items = ko.observableArray();
  _this.selectedItem = ko.observable("1");

  _this.items.push({
    id: "1",
    name: "Item A",
    selectedItem: _this.selectedItem
  });
  _this.items.push({
    id: "7",
    name: "Item B",
    selectedItem: _this.selectedItem
  });
  _this.items.push({
    id: "10",
    name: "Item C",
    selectedItem: _this.selectedItem
  });

}

ko.applyBindings(new ItemsViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form>
  <div data-bind="template: { name: 'items-template', foreach: items }"></div>

  <h3 data-bind="text: selectedItem"></h3>
</form>

<script type="text/html" id="items-template">
  <label>
    <input type="radio" data-bind="value: id, 
                                   checked: selectedItem"/>
    <span data-bind="text: name"></span>
  </label>
</script>

如何在knockoutjs脚本中组合模板和单选按钮？

1 个答案: