Question

我知道foreach-loops中的afterRender。

我想要的是一种在Knockout对DOM进行更改以响应某个viewmodel属性更改时获得通知的方法。

假设我有一个带有单个ko-observable属性“text”的viewmodel，它将div绑定为text-content。

在单个属性绑定上添加afterRender似乎不适用于这种情况。

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

我希望在绑定根据更改的vm-property更新DOM视图时触发类似于afterRender的事情，可能是afterUpdate ?.

这有可能以某种方式完成吗？可能会对Knockout代码进行一些调整吗？

Answer 1

我使用DOM Mutation Observer API完成了这项工作。使用attr绑定将监视的属性绑定到元素上的属性，然后使用MutationObserver＆＃39; 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>

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

1 个答案: