Question

为什么模板div在afterRender中显示为“：hidden”？

以下是代码：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
  <script src="js/jquery.tmpl.js"></script>
  <script src="js/knockout-1.2.1.debug.js"></script>
  <script>
  $(document).ready(function() {
        m = function (name)
        {
          this.name = name;
        }

        viewModel = {
          a : ko.observableArray(),
          sparkie : function (elements) {
            div = elements[0];
            console.log($(div).is(':hidden'));
          },
        }

        ko.applyBindings(viewModel);

        viewModel.a.push(new m('oh-no'));
    });
    </script>
</head>
<body>

<script type="text/html" id="tpl">
  <div> ${ $data.name } </div>
</script>

<div data-bind='template: { name: "tpl", foreach: a, afterRender: sparkie }'></div>

</body>
</html>

Answer 1

在afterRender模式下为模板绑定调用foreach时，元素尚未添加到DOM中。进行了一些额外的处理以确保有效地添加/删除节点。

但是，在元素位于DOM之后使用afterAdd选项执行代码时，可以使用foreach回调。

Answer 2

afterRender适用于

自定义 DOM上的后处理逻辑模板生成的元素

但不幸的是，在你的模板准备好后（在DOM上应用）会调用它，但它还没有插入到html中。

如果你正在使用foreach，那么Knockout会调用你的afterRender回调每个项目都添加到您的观察中阵列

但如果您传递模板的数据，也会调用一次。

KO允许你提供afterAdd和/或 beforeRemove回调操纵 a中添加/删除的DOM元素自定义方式

因此将为observableArray中的每个添加/删除项调用这些项。当这些被调用时，你的DOM就准备好了，所以它不再被隐藏，但只有当底层的observableArray被改变时才会调用这些回调。

<div data-bind="template: { name: 'tpl', foreach: a, afterAdd: sparkie }"></div>

为什么模板div在afterRender中显示为“：hidden”？

2 个答案: