有没有办法在仅知道绑定上下文的 knockoutjs 渲染后运行代码？

Question

我正在开发 CMS 后端中的一个模块。我正在尝试“挂钩”他们的淘汰赛绑定并在他们完成渲染时运行代码。到目前为止，我没有运气。

然而，我已经附加到不同的数据组件并获得了淘汰赛数据。

我有很多失败的尝试，但到目前为止，我有这个正在返回一个绑定上下文。

var bindingContext = ko.contextFor(jQuery('div[data-component="customer_form.areas"]').get(0));

有谁知道我可以使用它以某种方式附加观察者来观察渲染完成的方法吗？我会管理员，我是淘汰赛的新手。我不是在创建视图模型，也不是模板。我无法像我认为 应该 那样将 afterRender 添加到模板中。

Answer 1

就像你说的，这应该使用afterRender来完成。所有其他方法都感觉很hacky，因为您永远不知道淘汰赛何时会重新渲染（部分）ui。

我想不出为什么你需要这样的工作，但我该判断谁..

我能想到的唯一方法是使用MutationObserver。这是一个例子：

var bindingContextElement = document.querySelector("ul");

var renderThrottle = 300;
var renderCycle = null;
var onRenderComplete = function() {
  var pre = document.createElement("pre");
  var msg = new Date().toLocaleString() + ": finished rendering";
  pre.appendChild(document.createTextNode(msg));
  document.body.appendChild(pre);
}

// Observe mutations to element, call onRenderComplete after 300ms of no mutations
var observer = new MutationObserver(function(mutations) {
  clearTimeout(renderCycle);
  renderCycle = setTimeout(onRenderComplete, renderThrottle);
});

var config = {
  childList: true
};

observer.observe(bindingContextElement, config);

ko.applyBindings({
  items: ko.observableArray([1, 2, 3])
});

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

<ul data-bind="foreach: items">
  <li data-bind="text: $data"></li>
</ul>

<button data-bind="click: function() { items.push(items().length + 1)}">add</button>

此代码侦听<ul> 元素中的任何突变，该元素由敲除控制。一旦元素或其子元素开始发生更改，它就会尝试记录“渲染”消息。只有在 300 毫秒内没有进一步更改时才允许记录此消息。

查看the docs 以确定您的config 对象以及要查看的元素...请记住，如果事情变得比这个示例更复杂，事情可能会失控...