Knockoutjs After Render 渲染一个 Html 注释答案

【问题标题】：Knockoutjs After Render renders an Html commentKnockoutjs After Render 渲染一个 Html 注释
【发布时间】：2011-12-14 19:21:03
【问题描述】：

我注意到 Knockout 的模板渲染中有一个奇怪的行为。

我有一个简单的 Knockout 示例...

var viewModel = {
    stuff : ko.observable([{ id : 1, name : 'Thing'},
        { id: 2, name : 'Thingier' },
        { id : 3, name : 'Thingiest' }]),
    render: function(el){
        console.log(el);
    }
}

$(function(){
    ko.applyBindings(viewModel);
});

还有 HTML...

<ul data-bind="template: { name: 'thingTemplate',
                           foreach: stuff,
                           afterRender: render }">

</ul>
<!--
<script id="thingTemplate" type="text/html">
    <li>
        <span data-bind="text: name"></span>
    </li>
</script>-->

<script id="thingTemplate" type="text/html">
        <span data-bind="text: name"></span>
</script>

当使用当前被注释掉的模板调用渲染函数时，我得到一个jQuery(li)的console.log。

当使用当前模板调用 reunder 函数时，我得到 jQuery(Comment { length=0, nodeName="#comment", nodeType=8, more...}, span)。

那个评论节点是怎么回事？

这是工作小提琴...http://jsfiddle.net/jcreamer898/fqrv7/

【问题讨论】：

不是不行，而是传给render函数的el有html注释和渲染的span标签。

标签： knockout.js

【解决方案1】：

我遇到了同样的问题，请参阅： KnockoutJS template 'beforeRemove' called three times instead of 1

我的解决方案如下（不是很好，我知道..）：

afterAdd: function(elem) {
     if (elem.nodeName == '#comment') { return; } // <-- This line

     try {
        jQuery(elem).hide().fadeIn(2000);
     } catch (e) {
       console.log(e);
     } 
}

【讨论】：

if (elem.nodeType === 1) { jQuery(elem).hide().fadeIn(2000); } 清洁剂解决方案

【解决方案2】：

根据KnockoutJS documentation，将调用 afterRender 回调，传递“模板刚刚渲染的 DOM 节点数组”。换句话说，您的渲染回调应该期待一个节点数组。

现在，您的问题是为什么您看到评论元素回来了。我的问题是，即使您删除了

块，您是否看到相同的评论元素？

【讨论】：

有了li，我看不到评论，没有它，我看到评论...奇怪...
嗯。我在 KO 1.3 beta 中没有看到这一点。你试过那个版本吗？也许我们看到了 1.2 的错误。