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

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 会查看“selectedItem”的项目数组中包含的对象，而不是绑定(bind)到我的 ItemsViewModel 中的“selectedItem”变量。

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

Answer 1

在您的模板中，您的绑定(bind)上下文是一个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>

除了在 View 中解决问题，您还可以在模型中解决它。您可以将对可观察到的选择的引用传递给每个 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>