单个属性绑定更改后 Knockout 更新 DOM 时的事件答案

【问题标题】：Event when Knockout updates the DOM after a single property binding has changed单个属性绑定更改后 Knockout 更新 DOM 时的事件
【发布时间】：2013-12-06 10:03:30
【问题描述】：

我知道 afterRender 在 foreach-loops 中。

我想要的是一种在 Knockout 对 DOM 进行更改以响应特定视图模型属性更改时获得通知的方法。

假设我有一个带有单个 ko-observable 属性“text”的视图模型，它作为文本内容绑定到一个 div。

在这种情况下，在单个属性绑定上添加 afterRender 似乎不起作用。

我可以通过订阅来监听属性本身的变化，但在我的例子中，我将读出流动的 div 高度，当然，它基于绑定的文本内容。但是通过订阅，我会在 DOM 更新之前收到通知，并且 div 仍然具有旧的高度。

我想要类似于 afterRender 的东西，也许是 afterUpdate?，每当绑定基于更改的 vm-property 更新 DOM 视图时触发。

这有可能吗？也许对 Knockout 代码进行一些调整？

【问题讨论】：

您可以为我们添加一些代码吗？

标签： knockout.js

【解决方案1】：

我使用 DOM Mutation Observer API 完成了这项工作。使用attr 绑定将监视的属性绑定到元素上的属性，然后使用MutationObserver 的attributeFilter 选项将其配置为仅观察对该属性的更改。

<script>
  viewModel = {

    myProperty: ko.observable('...'),

  }

  // Set up a call back to be fired after each series of modifications to
  // "data-my-property" attributes in the subtree
  var mutationObserver = new MutationObserver(function() {
    // Do things in response to DOM mutation
  });
  mutationObserver.observe(document.querySelector('#watch',
    {subtree: true, attributeFilter: ['data-my-property']});

</script>

<body>

    <!-- Bind data-my-property to the viewModel property to be watched -->
    <div id="watch" data-bind='text: myProperty, attr: {"data-my-property": myProperty}'>

</body>

【讨论】：