web-dev-qa-db-ja.com

ノックアウトを使用した選択での変更イベント

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);
},
javascriptjqueryknockout.jsmagento2onselect
6
andiwan halim

UIイベントを手動でサブスクライブする代わりに、ノックアウトの双方向データバインドを使用します。

Knockoutのvalueデータバインドは、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 -->
10
user3297291