レンダリング後のKnockoutjs Htmlコメントをレンダリングする

Question

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> 

、I jQuery（li）のconsole.logを取得します。

現在のテンプレートでreunder関数を呼び出すと、jQuery（コメント長= 0、nodeName = "＃コメント"、nodeType = 8、more ...}、span）のconsole.logが得られます。

コメントノードとは何ですか？

ここでの作業フィドルだ... http://jsfiddle.net/jcreamer898/fqrv7/

Answer 1

はKnockoutJS documentationによると、afterRenderコールバックは渡して、呼び出される「DOMの配列がちょうどテンプレートによってレンダリングノードを示します。」つまり、レンダリングコールバックではノードの配列が必要です。

今、あなたの質問はなぜ戻ってきているのですか？私の質問は、<li>ブロックを削除しても、同じコメント要素が表示されますか？

Answer 2

私が見る、同じ問題を抱えていた： 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); 
    } 
}