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

Change event binding's function called on page load

本文关键字：加载 调用 函数 事件 绑定      更新时间：2023-09-26

我有一个select，我正在将change事件绑定到它上，因此一旦发生更改，我的函数就会启动。

问题是：当我的页面加载时，它会触发这个函数，我不希望发生这种情况。我只希望它在用户实际更改下拉列表的值时触发。

我的选择下拉列表：

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

如果有人知道它为什么在负载下发射，以及我如何解决这个问题，我将不胜感激。

使用Knockout时，这通常是一个危险信号。使用计算的可观察性或订阅在值更改时触发逻辑。例如：

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进行初始化，UI将使用optionsCaption立即再次将其设置为undefined，从而触发订阅。

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

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>

相关文章：