在带有淘汰赛的选择中更改事件

Posted 2023-05-07

【中文标题】在带有淘汰赛的选择中更改事件

【英文标题】：on Change event in select with knockout

【发布时间】：2017-08-26 17:48:43

【问题描述】：

我有一个问题如何调用 onchanges 敲 js 到我的选择选项，我已经有一个函数和 html，但是当我选择选择选项时，没有任何变化

<select data-bind="event:change:setSelectedStation() ,
                   options: seedData,
                   optionsText: 'text',
                   optionsValue: 'value'">
</select>

这是我的功能

setSelectedStation: function(element, KioskId)
     this.getPopUp().closeModal();
     $('.selected-station').html(element);
     $('[name="popstation_detail"]').val(element);
     $('[name="popstation_address"]').val(KioskId);

     $('[name="popstation_text"]').val(element);
     // console.log($('[name="popstation_text"]').val());
     this.isSelectedStationVisible(true);
,

【参考方案1】：

使用 knockout 的双向数据绑定，而不是手动订阅 UI 事件。

Knockout 的 valuedata-bind 监听 UI 变化并自动为您跟踪最新值。

您无需通过 jQuery 方法替换 HTML，而是使用 text、attr 和其他 value 绑定来在您的选择更改时更新 UI。

如果您想在选择更改时执行额外的工作（例如关闭弹出窗口），请将subscribe 设置为所选值。

var VM = function() 
  this.seedData = [
     
      text: "Item 1",
      data: "Some other stuff"
    ,
     
      text: "Item 2",
      data: "Something else"
    ,
     
      text: "Item 3",
      data: "Another thing"
    
  ];
  
  this.selectedItem = ko.observable();
  
  this.selectedItem.subscribe(function(latest) 
    console.log("Input changed");
  , this);
;

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="
        value: selectedItem,
        options: seedData,
        optionsText: 'text'">
</select>

<!-- ko with: selectedItem -->
<p>
  Your selection: <span data-bind="text: data"></span>
</p>
<!-- /ko -->

【讨论】：

不能只调用一个函数？

你可以，有点你不应该......如果你选择使用淘汰赛作为你的框架，最好填充“淘汰赛方式”。如果您想管理自己的事件处理并一一更新 UI 元素，最好只使用 jQuery 并完全跳过淘汰赛。

但是如果我想在 selectedItem 中输入参数的值，我应该输入什么？

@user3297291 尝试相同但出现错误：无法处理绑定“选项：函数（）返回种子数据”消息：种子数据未定义

选择更改时 ajax 怎么样？我怎么把它放在knockoutjs的方式中。