0

以下の例では、doSomething が起動しないことがわかります。テンプレート バインディングからを削除するif: Commentsと、doSomething が期待どおりに起動します。これを引き起こすために何が起こっているのか誰にも分かりますか？これはdata、テンプレート バインディング ハンドラで属性を使用しているときにも発生します。

現在、ノックアウト 2.2.1 を使用しています。jsfiddle http://jsfiddle.net/YADzx/2/

<div data-bind="template: { if: Comments, name: 'comments' }"></div>

<script type="tmpl" id="comments">
    <div data-bind="foreach: { data: Comments, afterAdd: $root.doSomething }">
        <div data-bind="text: name"></div>
    </div>
</script>
<script>
var vm = {
    Comments: ko.observableArray([{name:'hey'}]),
    doSomething: function (element, index, data) {
        $(element).addClass('wow');
    }
};

ko.applyBindings(vm);
vm.Comments.push({name:'foo'});
vm.Comments.push({name:'bar'});
</script>
4

1 に答える 1

10

バインディングのif条件により、変更されるたびに更新されます。その後、ノックアウトはテンプレート全体を再レンダリングし、バインディングの以前の状態は失われます。templateCommentsforeach

どのような副作用が必要か、または必要でないかに応じて、これを回避する方法がいくつかあります。

  1. オプションを削除しifます。コードはすべて引き続き機能しますが、HTML<div>にバインディングが含まれます。foreachしたがって、レイアウトが台無しになる場合、これは良いオプションではありません。

  2. ifを から分割し、バインディングtemplateで別の要素 (またはコメント構文) を使用します。ifこれは、バージョン 2.2.0 以降の Knockout を使用している限り機能します。

    <script type="tmpl" id="comments">
    <!--ko if: Comments-->
    <div data-bind="foreach: { data: Comments, afterAdd: $root.doSomething }">
        <div data-bind="text: name"></div>
    </div>
    <!--/ko-->
</script>

  3. ifバインディングを使用する代わりにvisible、現在の要素を非表示にし、再レンダリングしないバインディングを使用します。

    <script type="tmpl" id="comments">
    <div data-bind="visible: Comments, foreach: { data: Comments, afterAdd: $root.doSomething }">
        <div data-bind="text: name"></div>
    </div>
</script>

ただし、考慮すべきことの 1 つは、observableArray通常、 an には偽の値が含まれないということです。これは、JavaScript では、空の配列が真であるためです。if: Comments空の配列をテストする場合は、 からに変更する必要がありますif: Comments().length。

于 2013-04-05T02:04:57.817 に答える