Question

我在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>

当使用当前已注释掉的模板调用render函数时，我得到一个 jQuery（li）的console.log。

当使用当前模板调用reunder函数时，我得到 jQuery的console.log（注释{length = 0，nodeName =“＃comment”，nodeType = 8，more ...}，span）< /强>

该评论节点有什么用？

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

Answer 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);
     } 
}

Answer 2

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

现在，你的问题是为什么你会看到一个评论元素回来。我的问题是，即使您删除了＆lt; li＆gt;，您也会看到相同的评论元素吗？方框？

Knockoutjs渲染后呈现Html评论

2 个答案: