Question

在这个视图模型中，我将下拉列表与对象绑定在一起。当我想清除下拉列表中的项目时，我已经为所选项目提供了“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());

Answer 1

你的

绑定

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

当selectedStation为null时，

会抛出错误。绑定尝试查找从selectedStation（）返回的值的.name属性，但“null”没有.name属性。有几种方法可以解决这个问题：

将绑定包装在“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-case。

你可以read a bit more about these on my blog。

我希望有所帮助！

与对象数组绑定的Knockout选项会消除问题

1 个答案: