knockout.js更新选择列表不会触发第一次更改

我有2个选择列表，我想同步索引，因此当第一个索引为1时，第二个索引将为1等。knockout.js更新选择列表不会触发第一次更改

这是我的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/

...这是如何重现问题：从灯光

运行的jsfiddle
选择GREEN（行动将改走）3.选择停止从操作（灯应更改为红色，但他们不这样做）

来源

2013-01-25 christoefar

无法尝试您的代码，但几次观察1.您的DDL *选定的observables用空值初始化。你可能想用一些基本值来启动它们。所以当第一个.subscribe mtheod执行时，你不会在indexOf操作中得到一个null或-1。 2.你为什么要做document.getElement ..而不更新你自己选择的observable本身？ – ryadavilli

这是我的理解，这是获得选定索引的方式？例如，如果我更新“self.ddlLightSelected”，则该值不会在选择框中更改。 – christoefar

jsfiddle目前无法正常工作，但您的示例在此处可用http://tinkerbin.com/eQo0XM1P - 只需选择运行 –

问题是这行代码：

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

你直接更改DOM，不允许淘汰赛揭开序幕观察到的模式。

如果您想要更改某些内容，请始终更改ko.observable，而不是JavaScript变量或DOM。淘汰赛将认识到这一变化，并因此改变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 
});

Updated JS Bin。

来源

2013-01-25 11:21:55 MarcoK

完美，解决了问题。 – christoefar

knockout.js更新选择列表不会触发第一次更改

回答

相关问题