3

我有 2 个选择列表，我想同步索引，所以当第一个的索引为 1 时，第二个的索引为 1，依此类推。

这是我的html。

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>

<div>
<select id="selLight" data-bind="options: $root.ddlLight, value: ddlLightSelected"></select>
<select id="selAction" data-bind="options: $root.ddlAction, value: ddlActionSelected"></select>
</div>

和JavaScript ...

var ViewModel = function() {
    var self = this;

    self.ddlLight  = ko.observableArray(["RED", "AMBER", "GREEN"]);
    self.ddlAction = ko.observableArray(["STOP", "READY", "GO"]);
    self.ddlLightSelected  = ko.observable();
    self.ddlActionSelected = ko.observable();

    self.ddlLightSelected.subscribe(function (event) {
        document.getElementById("selAction").selectedIndex =
            self.ddlLight.indexOf(self.ddlLightSelected());
     });

    self.ddlActionSelected.subscribe(function (event) {
        document.getElementById("selLight").selectedIndex =
            self.ddlAction.indexOf(self.ddlActionSelected());
     });    
};

ko.applyBindings(new ViewModel());

我有一个确切的问题...

http://jsfiddle.net/phykell/2vUTw/

编辑：我在使用 jsfiddle 时遇到了一些问题，所以这里有一个 jsbin ... http://jsbin.com/ilomer/4/

...这是重新创建问题的方法：

  1. 运行 jsFiddle
  2. 从 LIGHTS 中选择 GREEN（ACTIONS 将变为 GO） 3. 从 ACTIONS 中选择 STOP（LIGHTS 应变为 RED 但它们不会）
4

1 回答 1

4

问题是这行代码：

document.getElementById("selAction").selectedIndex = self.ddlLight.indexOf(self.ddlLightSelected());

您直接更改 DOM，不允许 Knockout 启动可观察模式。

如果您想更改某些内容，请始终更改ko.observable，而不是 JavaScript 变量或 DOM。Knockout 将识别更改，因此更改 DOM 本身。解决方案是：

self.ddlLightSelected.subscribe(function (event) {
      var index = self.ddlLight.indexOf(self.ddlLightSelected());
      self.ddlActionSelected(self.ddlAction()[index]); // Update the Observable, not the DOM
});

self.ddlActionSelected.subscribe(function (event) {
    var index = self.ddlAction.indexOf(self.ddlActionSelected());
    self.ddlLightSelected(self.ddlLight()[index]); // Update the Observable, not the DOM
});

更新了 JS Bin。

于 2013-01-25T11:21:55.753 回答