2

カスタム jQuery イベントを Knockout 3.2 ビュー モデルにサブスクライブする最良の方法を見つけようとしています。

私は FuelUX ツリー コントロールを使用しており、誰かがツリー項目を選択するたびに、選択したオブジェクトをビュー モデル オブザーバブルにプッシュしたいと考えています。

FuelUx コントロールには、クリックを処理し、DOM 要素にアタッチされた選択された jQuery データ オブジェクトを関数に返す組み込みの jQuery イベントがあります。以下は基本的なコードです

$('#myTree').on('selected.fu.tree', function (evt, data) {

    var selectedArray = $('#myTree').tree('selectedItems'); //fuelux custom event
    ko.utils.arrayForEach(selectedArray, function (bnd) {
        if (bnd) {
             self.linked_documents.push(new DocFile(bnd.dataAttributes.document));
        }
    });
});

私は以下を見てきましたが、おそらくこれが正しいアプローチです。ただし、提案/推奨事項は大歓迎です。

http://knockoutjs.com/documentation/unobtrusive-event-handling.html

ありがとう、グレッグ

4

1 に答える 1

2

「イベント」という用語に惑わされないでくださいevent。バインドは、DOM イベントへのバインドに最も役立ちます。代わりに、カスタム バインディング ハンドラーを使用して、ビューの一部を UI プラグインに接続できます。

例えば：

ko.bindingHandlers["fuelEX"] = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $(element).on('selected.fu.tree', function (evt, data) {
      // Modify your view model here in response to the plugin's event
      var observable = valueAccessor();
      observable(observable() + 1);
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // Update the DOM element based on the supplied values here.
  }

};

ko.applyBindings({ 
  counter: ko.observable(1),
  simulateFuelEXEvent: function() { console.log('hai'); $("#fuel").trigger("selected.fu.tree"); }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="fuel" data-bind="fuelEX: counter"></div>
<p>Counter value: <span data-bind="text: counter"></span></p>
<p><button data-bind="click: simulateFuelEXEvent">Simulate event</button></p>

于 2014-10-24T12:43:19.603 に答える