在页面加载中默认调用更改事件 - 淘汰赛

Posted 2023-05-08

【中文标题】在页面加载中默认调用更改事件 - 淘汰赛

【英文标题】：Change event is called by default in page load - knockout

【发布时间】：2018-02-14 12:10:59

【问题描述】：

当用户使用 ajax 调用更改下拉选项时，我正在尝试保存该值。这是我的下拉菜单

<select data-bind="options: RefreshOptions, optionsText: 'Value', optionsValue: 'Key', value: RefreshSelectedValue,  event:  change: SaveRefreshValue "></select>

我正在绑定下拉值。但问题是更改事件 SaveRefreshValue 函数默认调用（页面加载）。 我尝试使用 optionsCaption: ' ' 效果很好。但它在下拉列表中添加了一个不需要的空值。

请帮我解决这个问题。

【问题讨论】：

如果用户真的想要列表中的第一个选项，你会怎么做？如果选择不更改其值，则淘汰赛不会再次触发更改，因此用户必须先选择 another 选项，然后返回实际选项...听起来像触发应用绑定时的 AJAX 调用是正确的行为。

【参考方案1】：

如果RefreshSelectedValue 只是一个没有值的ko.observable()，那么下拉数组中的第一项将对其进行SET。这将导致您的更改事件触发。

还可以使用subscribe 代替更改 KO 中的下拉菜单。这是fiddle。

更新：如果您坚持不添加 optionCaption，那么我可以建议一个 hack（它不是很漂亮，但确实可以）：创建一个 counter时间下拉列表更改为全局变量。然后如果计数超过一个，做你的ajax：fiddle

var dropdownChangeCount = 0;

var viewModel = function () 
    var self = this;
    self.RefreshSelectedValue = ko.observable();
    self.RefreshOptions = ko.observableArray([
         new RefreshModel( id: "1", name: "Refresh1" ),
         new RefreshModel( id: "2", name: "Refresh2" )]);

    self.RefreshSelectedValue.subscribe(function (selectedValue) 
        dropdownChangeCount++;
        if (dropdownChangeCount > 1) 
            alert("changed manually, not called on load");
        
    )
;

【讨论】：

感谢您的回复。我在 onchange 事件中使用了 Ajax 调用。如果我使用订阅，它将导致 ajax 调用，这就是为什么这里不使用订阅。当用户手动更改下拉列表时，我需要调用 ajax

@Vetri subscribe 有一个函数。所以你可以在订阅函数内的change函数内做任何你正在做的事情

如果您坚持不添加 optionText，那么我可以建议一个 hack（它不是很漂亮，但确实有效）：创建一个 counter 用于更改下拉列表的次数作为全局变量。然后如果计数超过一个，做你的ajax：jsfiddle.net/dqUAz/1625

【参考方案2】：

如果您不想有标题并且不想一开始选择任何内容，请使用valueAllowUnset 绑定选项：

<select data-bind="
    options: RefreshOptions, 
    optionsText: 'Value', 
    optionsValue: 'Key', 
    value: RefreshSelectedValue, 
    valueAllowUnset: true"></select>