在选择中使用淘汰赛更改事件 [英] on Change event in select with knockout

问题描述

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

I have a problem how to call onchanges knock js to my select option, i already have a function and html, but when i choose the select option, nothing changes

<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);
},

推荐答案

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

Use knockout's two-way data-binds instead of manually subscribing to UI events.

Knockout 的 value 数据绑定侦听 UI 更改并自动为您跟踪最新值.

Knockout's value data-bind listens to UI changes and automatically keeps track of the latest value for you.

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

Instead of replacing HTML via jQuery methods, you use text, attr and other value bindings to update the UI whenever your selection changes.

如果您想在选择更改时执行其他工作(例如关闭弹出窗口)，您可以订阅所选值.

If you want to perform additional work when a selection changes (e.g. closing a pop up), you subscribe to the selected value.

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 -->

这篇关于在选择中使用淘汰赛更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！