KnockoutJS 自定义绑定多次触发答案

【问题标题】：KnockoutJS custom binding firing multiple timesKnockoutJS 自定义绑定多次触发
【发布时间】：2013-06-06 23:50:50
【问题描述】：

我正在尝试使用自定义绑定显示通知 DIV，同时还通过 2 个可观察对象调整该 DIV 的 CSS 和 HTML。

问题是，当我更改这 2 个可观察对象的值时，它也会出于某种原因触发自定义绑定。

模板：

<div class="alert top-alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div>

自定义处理程序：

ko.bindingHandlers.fade = {
  update: function resolveFade(element, valueAccessor, allBindingsAccessor) {
    if (ko.utils.unwrapObservable( valueAccessor() )) {
      $(element).hide().delay(300).fadeIn('slow');
    } else {
      // fade out the notification and reset it
      $(element).fadeOut('slow', function() {
        // reset those 2 observables that set class and HTML of the notification DIV
        MyClass.topMessageType('');
        MyClass.topMessage('');
      });
    }
  }
};

触发代码：

MyClass.topMessageType('alert-info');
MyClass.topMessage(msg);
MyClass.topMessageShow(true);

JSFiddle: http://jsfiddle.net/UrxXF/1/

【问题讨论】：

我认为您的问题在于其他与可观察对象的绑定。它们都成为allBindingsAccessor 的一部分，并且更改它们可能需要重新评估您的绑定，因此淘汰赛再次调用它。要解决此问题，您可以在淡入/淡出之前检查元素的可见性和/或动画状态。

标签： knockout.js knockout-2.0

【解决方案1】：

这与所有绑定在单个元素上一起触发的事实有关。这是描述当前行为的帖子：http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html。这实际上在 KO 3.0 中发生了变化，其中绑定在元素上独立维护。

您现在可以使用的一个选择是在 init 函数中设置自己的 computed，例如：

ko.bindingHandlers.fade = {
  init: function resolveFade(element, valueAccessor, allBindingsAccessor) {
      ko.computed({
         read: function() {
             /your logic goes here
         },
         disposeWhenNodeIsRemoved: element
      });
  }
};

使用这种技术，您可以模拟update 函数，但允许它独立于元素上的其他绑定进行操作。唯一的小缺点是，您目前无法从绑定字符串中解包的 observable 中获得任何依赖项（例如 fade: topMessageShow() 而不是 fade: topMessageShow）。

【讨论】：

这似乎可以解决问题，谢谢！关于 KO 3.0 何时发布的任何信息？
我们应该会在下个月发布测试版以及 KO 2.3 版本。