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 为空时抛出错误。绑定尝试查找从 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 情况。

你可以在我的博客上阅读更多关于这些的内容。

我希望这会有所帮助！

于 2013-06-07T16:22:55.833 回答