0

このビュー モデルでは、ドロップダウン リストをオブジェクトにバインドしています。ドロップダウンリストからアイテムをクリアしたい場合、選択したアイテムに「null」を指定しましたが、ドロップダウンはクリアされますが、選択したアイテムは削除されません。フィドルを見てください。http://jsfiddle.net/aroor/Su8Zq/36/

<select data-bind="optionsCaption: ' ', options: stations, optionsText : 'name' ,value: selectedStation">   </select>
   <button data-bind="click: clearSelectedStation">Clear</button>
     <br>   
      <span data-bind='text : selectedStation().name'></span>



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

    self.station= ko.observable();
    self.selectedStation = ko.observable();



    self.stations = ko.observableArray([{name :'CLT'},{ name : 'PHL'},{ name :'PHX'},{ name :'PIT'}]);

    self.clearSelectedStation = function () {
    self.selectedStation(null);
   };
   };

 ko.applyBindings(new ClearSelectionViewModel());
4

1 に答える 1

2

あなたのバインディング

<span data-bind='text : selectedStation().name'></span>

selectedStation が null の場合、エラーがスローされます。バインディングは selectedStation() から返された値の .name プロパティを見つけようとしますが、「null」には .name プロパティがありません。これに対処するには、いくつかの方法があります。

nullから保護する「with」バインディングでバインディングをラップし、

<!-- ko with : selectedStation -->
    <span data-bind="text: name"></span>
<!-- /ko -->

または、ビューモデルで計算されたものを作成して、null を処理します

var ClearSelectionViewModel = function () {
    var self = this;
    ...
    self.selectedStationName = ko.computed(function(){
        return self.selectedStation() ? self.selectedStation().name : '';
    }
    ....
}

<span data-bind="text: selectedStationName"></span>

または、If/IfNot バインディングを使用して null ケースを処理します。

これらについては、私のブログでもう少し詳しく読むことができます。

それが役立つことを願っています！

于 2013-06-07T16:22:55.833 に答える