Question

我有一个select并且我绑定了change事件，所以一旦更改，我的功能就会触发。

事情是：当我的页面加载它时会触发此功能，我不想发生这种情况。我只想在用户实际更改下拉列表的值时触发它。

我的选择下拉列表：

<select data-bind="options: Main.Items, 
                   optionsText: 'Name', 
                   value: Main.SelectedItems, 
                   optionsCaption: 'Please Select', 
                   event: { change: function(data,event) { ItemClick(null) }}">
</select>

如果有人知道为什么它会在加载时触发，以及我如何解决这个问题，我们将非常感激。

Answer 1

使用Knockout时，这通常是一个红旗。使用computed observables或subscriptions可在值更改时触发逻辑。 E.g：

var MainViewModel = function(){
  var self = this;
  self.Items = [{Name: 'apple'}, {Name: 'orange'}];
  self.SelectedItems = ko.observable();
  
  function ItemClick(newValue) {
    alert(ko.toJSON(newValue));
  }
  
  self.SelectedItems.subscribe(ItemClick);
}

ko.applyBindings({ Main: new MainViewModel() });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: Main.Items, 
                   optionsText: 'Name',
                   value: Main.SelectedItems,
                   optionsCaption: 'Please Select'"></select>

确保按上述方式设置SelectedItems，或明确设置为undefined。也就是说，如果您使用null初始化，则用户界面会使用optionsCaption立即将其再次设置为undefined，从而触发订阅。

PS。您的视图建议可以选择多个项目（因为该属性是复数形式的），如果是这样，您需要multiple上的selecte属性以及observableArray SelectedItems的组合1}}和the selectedOptions binding。

PPS。您发布的代码与您的实际代码的行为方式不同。也就是说，在以下代码段中，您可以看到在第一次更改下拉列表时未触发event绑定ItemClick功能。

function ItemClick(x) {
  alert(x);
}

var MainViewModel = function(){
  var self = this;
  self.Items = [{Name: 'apple'}, {Name: 'orange'}];
  self.SelectedItems = ko.observable();
}

ko.applyBindings({ Main: new MainViewModel() });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: Main.Items, 
                   optionsText: 'Name', 
                   value: Main.SelectedItems, 
                   optionsCaption: 'Please Select', 
                   event: { change: function(data,event) { ItemClick(null) }}"></select>

更改事件绑定在页面加载时调用的函数

1 个答案: