2

次のように、2つ（またはそれ以上）の異なる要素の配列を持つ機能を作成しようとしています。

var cities1 = ["Paris", "London", "Warsaw", "Moscow"];
var cities2 = ["Rome", "Paris", "Berlin", "Amsterdam"];

そして、select要素にバインドされているobservableArrayにそれらを割り当てることができます。問題は、この例のように、これらの配列に1つの共通要素がある場合です：'Paris'。「パリ」を選択してから、observableArrayのデータをcitys1からcitys2に切り替えると、選択が変更されたという情報が得られません。

問題を説明するために準備したフィドルを確認してください。http：//jsfiddle.net/zbkkzdsp/3upSH/ observableArrayでデータを切り替えると、select要素で「リセット」選択が発生する方法を知っていますか？

4

1 に答える 1

1

マイケル・ベストが指摘しているように、都市は実際には変わっていません。あなたの都市がそれ自体がビューモデルである場合、あなたが説明することは自動的に起こります。

ただし、プリミティブがあるだけなので、配列が変更されたときに都市の現在の値を「クリア」するようにviewmodelに明示的に指示する必要があります。次に、最初の要素が自動的に選択されます。

これを行うには、クリックイベントでに設定self.Cityするか、をサブスクライブして設定します。また、更新された値がであるときにアラートを出さないように、サブスクリプションを更新することを確認する必要があります。''self.City.Availableself.City''self.City''

さらに、clickイベントで繰り返される機能の一部を3番目の関数に移動し、2つのclick関数でこれをプロキシしました。関数はまったく同じことを実行していましclickたが、データセットが異なるだけなので、コードの重複がなくなります。ATMは、開始が1行しかないため、取るに足らないように見えますが、Cityの更新に機能を追加すると、バグを減らし、より迅速に変更を加えることができます。

次のコードサンプルでCity値をクリアする両方の方法を提供し、非サブスクライブバージョンをコメントアウトして、参照用に用意しました。

var cities1 = ["Paris", "London", "Warsaw", "Moscow"];
var cities2 = ["Rome", "Paris", "Berlin", "Amsterdam"];

function MyViewModel() {
    var self = this;

    self.City = ko.observable();
    self.City.Available = ko.observableArray();

    self.City.subscribe(function (newValue) {
        if(newValue != '') {
          alert('City has changed to ' + newValue);
        }
    });

    self.City.Available.subscribe(function(newValue) {
       self.City(''); 
    });

    self.click1 = function () {
        self.loadCityList(cities1);
    };

    self.click2 = function () {
        self.loadCityList(cities2);
    };

    self.loadCityList = function(cityList) {
        // clear city w/o subscription
        //self.City('');
        self.City.Available(cityList);        
    }


};

ko.applyBindings(new MyViewModel());

別れのメモとして、都市名に空の文字列を許可したい場合、または都市がクリアされたときに変更アラートを抑制するためのより堅牢なアプローチが必要な場合は、Cityにサブオブザーバブルを追加してtrueとfalseを切り替えることができます。これを行った場合は、このロジックをすべてカプセル化するために「clearCity」関数を追加することをお勧めします。元

function MyViewModel() {
    ...
    self.City.isLoading = ko.observable(false);

    self.City.subscribe(function (newValue)) {
        if(self.City.isLoading()) {
            self.City.isLoading(false);
        } else {
            alert('City has changed!');
        }
    });

    ...

    //could also put this on city as self.City.clearCity
    self.clearCity = function() {
        self.City.isLoading(true);
        self.City('');
    }

    ...

}
于 2013-03-28T17:40:16.330 に答える