3

2 つの選択リストがあり、インデックスを同期したいので、最初のインデックスが 1 の場合、2 番目のインデックスは 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());

Knockout が監視可能なパターンを開始できないように、DOM を直接変更しています。

何かを変更したい場合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 に答える