0

私がやりたいのは、「afterAdd」と「beforeRemove」を指定するオプションを使用して、observableArray に動的テンプレートをバインドすることです。私のコードを見ると、おそらく理解しやすいでしょう：

<div id="form_container" data-bind="template: {name: fnGetTemplate,
                                               foreach: OpenedForms(),
                                               beforeRemove: fnBeforeRemoveProcess(),
                                               afterAdd: fnAfterAddProcess()}"></div>

(簡易版) OpenedForms = ko.observableArray()[{Template: 'Template1'}, {Template: 'Template2}];

fnGetTemplate は配列要素をほとんど取り込んで、テンプレート名 (「Template1」など) を返します。

配列内のすべてがレンダリングされます。ただし、問題はfnAfterAddProcess // fnBeforeRemoveProcessがfnGetTemplateの前に呼び出されることです。したがって、実際には afterAdd と afterRemove を呼び出した後にテンプレートをレンダリングしています。afterAdd を afterRender に置き換えてみましたが、同じことが起こりました。何らかの理由で、observableArray に要素を追加しただけで、実際にはfnBeforeRemoveProcess -> fnAfterAddProcess -> fnGetTemplateが呼び出されました。

ただし、「beforeRemove」をサポートしていないことを除いて、これは正しく機能しました。

<div id="form_container" data-bind="foreach: {data: OpenedForms, afterRender: AfterAddProcess}">
    <div data-bind="template: {name: Template, data: $data}"></div>
</div>

カスタムバインディングを書く必要があるかもしれませんが、どこが間違っていたのか、あるいは問題に取り組むためのより良い方法を誰かが指摘できれば.

ありがとう、

4

1 に答える 1

0

ただし、問題は fnAfterAddProcess//fnBeforeRemoveProcess が fnGetTemplate の前に呼び出されることです。

これは、バインディングで関数を呼び出しているためであり、バインディング文字列が解析されるときに実行されます。バインディングで関数への参照のみを渡す必要があります。

<div id="form_container" data-bind="template: {name: fnGetTemplate,
                                               foreach: OpenedForms(),
                                               beforeRemove: fnBeforeRemoveProcess,
                                               afterAdd: fnAfterAddProcess}"></div>
于 2012-10-06T01:06:39.800 に答える