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

时间:2016-05-18 14:36:24

标签: magento knockout.js binding render

我正在使用CMS中的模块。后端。我试图加入'他们的敲除绑定并在完成渲染时运行代码。到目前为止,我没有运气。

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

我尝试了许多失败的尝试,但到目前为止,我有一个返回绑定上下文。

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

有没有人知道我可以使用它以某种方式附加观察者观察渲染完成的方式?我是管理员,我是淘汰赛的新手。我没有创建视图模型,也没有创建模板。我无法将afterRender添加到模板中,就像我认为应该一样。

1 个答案:

答案 0 :(得分:2)

就像你说的,这个应该使用afterRender来完成。所有其他方法都感觉很难,因为你永远不会知道什么时候敲门会重新渲染(部分)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>元素中的任何突变,该突变由knockout控制。一旦更改开始发生在元素或其子元素上,它就会尝试记录“已呈现”消息。如果300ms没有进一步的更改,则只允许记录此消息。

查看the docs以确定您的config对象以及要观看哪些元素...请注意,如果内容比此示例更复杂,事情可能会失控。 ..