淘汰赛自定义绑定如何识别哪个可观察的触发更新？

Question

我有一个自定义绑定，它依赖于两个 observable：data 和 selected。把它想象成一张精致的桌子。

在 html 中它被称为： <div data-bind="myComponent: {}, data: myData, selected: currentSelection"></div>

ko.bindingHandlers.myComponentupdate 函数在 myData 和/或 currentSelection 更改时触发。在 update 函数中，我如何确定哪个 observable 触发了它？因为如果 myData 发生变化，我必须重新渲染组件，而如果 currentSelection 发生变化，我只需要更新突出显示的元素。

Knockout : find out which observable triggerred computed 是唯一的解决方案吗？

感谢您的帮助！

Answer 1

我不确定这是否被认为是“不好的做法”，但我经常通过在init 函数中添加自己的订阅来绕过update 方法...

这将允许您创建多个单独的订阅，这些订阅执行特定于data 或selected 中的更改的行为。

我认为这个方法让你负责处理额外的订阅，所以你可能想要做一些额外的内存泄漏检查..

在下面的示例中，您将看到一个只有 init 函数的自定义绑定。在init 中，我检索了另外两个绑定（在我的情况下left 和right 将是data 和selected 在你的情况下）。我为这些可观察值发生变化定义了两种不同的行为。在init 函数的末尾，我调用了这两个函数。

ko.bindingHandlers.myComponent = {
  init: function(element, valueAccessor, allBindings) {
    var changeLeftColor = function() {
      element.children[0].style.backgroundColor = randomColor();
    }
    
    var changeRightColor = function() {
      element.children[1].style.backgroundColor = randomColor();
    }
  
    var leftSub = allBindings.get("left").subscribe(changeLeftColor)
    var rightSub = allBindings.get("right").subscribe(changeRightColor);
    
    changeLeftColor();
    changeRightColor();
    
    // When knockout disposes the element (for example because 
    // it's in an `if` binding), dispose the subs.
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      leftSub.dispose();
      rightSub.dispose();
    });
  }
}

ko.applyBindings({ left: ko.observable(0), right: ko.observable(0) });


// Utils
function randomColor() {
  return "#" + Array(6).fill().map(function() {
    return "0123456789ABCDEF"[Math.floor(Math.random() * 16)];
  }).join("");
}

div > div {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<div data-bind="myComponent, left: left, right: right">
  <div data-bind="text: left, click: left.bind(null, left() + 1)"></div>
  <div data-bind="text: right, click: right.bind(null, right() + 1)"></div>
</div>