knockout.js afterRender 是如何工作的？答案

【问题标题】：How does knockout.js afterRender work?knockout.js afterRender 是如何工作的？
【发布时间】：2017-06-21 07:02:34
【问题描述】：

knockout.js 的 afterRender 文档对我来说不是很清楚。它的目的是什么，我们必须如何使用它？有哪些主要的用法示例？

【问题讨论】：

When do we need to use afterRender of Knockout.js and How do we use it?的可能重复
看起来您在stackoverflow.com/questions/44644730/… 中重新提出了这个问题？我已经投票决定关闭这个作为你后来的一个骗局。
这个问题现在有了答案，但另一个没有，所以我以接近投票的方式转移到另一个问题。 @user7677413 现在你有答案了，你可以关闭你的另一个吗？如果他们可以找到已接受答案的问题，而不是找到未回答的问题，它只会对其他人有所帮助。

标签： jquery ajax knockout.js

【解决方案1】：

Knockout afterRender 每次复制 foreach 块并插入到文档中时都会调用，无论是在 foreach 首次初始化时，还是在以后将新条目添加到关联数组时。如果在使用 foreach 时涉及繁重的逻辑，这可能会很昂贵。

afterAdd — 与 afterRender 类似，不同之处在于它仅在将新条目添加到数组时调用（而不是在 foreach 第一次迭代数组的初始内容时）。 afterAdd 的一个常见用途是调用诸如 jQuery 的 $(domNode).fadeIn() 之类的方法，以便在添加项目时获得动画过渡。

如果您只需要在将“新”项添加到数组后运行代码，请使用 afterAdd。

为避免在将每个项目添加到 UI 后这种昂贵的运行代码形式，请创建一个自定义绑定处理程序以在页面加载后运行。

下面是我用来在 pageLoad 上隐藏表单的一个。当然，您可以通过初始化和更新选项告诉它做您想做的事情。

示例代码：

ko.bindingHandlers.pageLoad = {
init: function (element, valueAccessor, allBindingsAccessor, data, context) {
    var value = ko.unwrap(valueAccessor());
    $(element).hide(value);

},
update: function (element, valueAccessor, allBindings) {     
}};

还可以查看：afterRemove、beforeMove 和 afterMove here!

您选择的元素上的标记：

data-bind="pageLoad: function() { hideForm() }"

javascript代码：

self.hideForm = function () {
        $("#form").hide("slide", 500);
};

【讨论】：

谢谢。那么你是说“foreach：{ afterRender：___}”中的函数将应用于“foreach：{data：____}”中的每个元素吗？如果是这样，如果我们想传递一个 viewModel 并向它的每个元素运行一个函数，我们必须如何使用它？例如，假设我正在传递一个 viewModel 'A'，并且我想在它的每个元素上运行函数“F”。我们该怎么做？
这里是一个例子： data-bind="afterRender: function () { F() }" *确保在 ViewModel A 中将 F 定义为函数。我的与上面示例一起使用的示例是 data-bind="pageLoad: function () { hideForm() }"。这会调用我自定义的绑定处理程序。淘汰赛最好的部分是自定义绑定轻松舒适地进行竞标。
我认为您缺少链接
感谢您的解释，但我仍然不知道如何在我的具体情况下使用。我在我的问题上添加了我的代码。如果你能看一下我会很棒。
添加自定义绑定处理程序并将其称为“filterForm”或类似名称。更改 afterRender 以调用自定义 filterForm: 并在 init 上：添加您的 renderApplication 函数。