Question

我有一个依赖于两个可观察对象的自定义绑定：data和selected。把它看作一张精心制作的表格。

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

myData和/或currentSelection更改时会触发ko.bindingHandlers.myComponent update函数。我怎么能在更新函数中决定哪个observable触发了它？因为如果myData发生了变化，我必须重新渲染组件，相反，如果currentSelection发生了变化，我只需要更新哪个元素被突出显示。

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

感谢您的帮助！

Answer 1

我不确定它是否被认为是＆＃34;不良做法＆＃34;，但我经常通过在update添加我自己的订阅来绕过init方法功能......

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

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

在下面的示例中，您将看到仅具有init功能的自定义绑定。在init我检索了两个其他绑定（left和right，在我的案例中，data和selected在你的身上。我为这些可观察量的变化定义了两个不同的行为。在init函数结束时，我只调用一次。

＆＃13;

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("");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Knockout自定义绑定如何识别哪个可观察的已触发更新？

1 个答案: