使用 FuelUX 树为自定义 Jquery 事件订阅可观察到的淘汰赛答案

【问题标题】：Subscribing a knockout observable to a custom Jquery event with FuelUX tree使用 FuelUX 树为自定义 Jquery 事件订阅可观察到的淘汰赛
【发布时间】：2014-10-23 18:22:05
【问题描述】：

我正在尝试找出如何将自定义 jQuery 事件订阅到 Knockout 3.2 视图模型的最佳方式。

我正在使用 FuelUX 树控件，并且每当有人选择树项目时，我想将所选对象推送到可观察的视图模型中。

FuelUx 控件有一个内置的 jQuery 事件来处理单击并将附加到 DOM 元素的选定 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

谢谢，格雷格

【问题讨论】：

标签： knockout.js fuelux

【解决方案1】：

不要被“事件”一词所迷惑，event 绑定对于绑定到 DOM 事件最有用。相反，您可以使用 custom binding handler 将一部分视图连接到 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>

【讨论】：

谢谢，效果很好！！供未来使用 FuelUx 树控件的人使用。我必须将数据绑定到以下