Question

假设我有一个可观察的数组。这个数组包含填充<select>列表的项目。有没有办法让选项知道它是否是当前选择的选项，并根据它动态设置值observable？

item.isSelected(true)

我知道我可能会制作某种janky ko.computed with a for each循环来比较选择的内容与我的数组中的项目然后返回true作为值或其他东西。只是想知道是否有更优雅/简洁的东西。

使用复选框很简单：

data-bind="checked: isSelected"

寻找整洁的东西。

Answer 1

根据您要使用isSelected的方式，它可以只是一个函数，用于将所选值与其所属的项目进行比较。您可以对isSelected进行数据绑定，View将响应更改，就像它是一个可观察的一样。也是计算机（因为它将访问select的值可观察）。

它也可以使它成为（父）视图模型中的一个函数，它将一个项作为参数。以下示例显示了两种用法。

function createItem(name) {
  return {
    name: name,
    isSelected: function() {
      return this === vm.selected();
    }
  };
}
var vm = {
  items: ko.observableArray(ko.utils.arrayMap(['one', 'two', 'three'], createItem)),
  selected: ko.observable(),
  isSelected: function(item) {
    return vm.selected() === item;
  }
};

ko.applyBindings(vm);

.selected {
  background-color: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options:items, optionsText:'name', value:selected"></select>
<ul data-bind="foreach:items">
  <li data-bind="text:name, css:{selected: $parent.isSelected($data)}"></li>
</ul>
<ul data-bind="foreach:items">
  <li data-bind="text:name, css:{selected: isSelected()}"></li>
</ul>

KnockoutJS：知道在下拉列表中选择了哪个项目

1 个答案: