1

大規模な再帰的データ構造をレンダリングしており、ユーザーがその構造内の個々の要素の編集を切り替えられるようにしようとしています。まだ表示されていなくても、すべての要素にエディター バインディングが適用されているため、バインディングを適用するときにパフォーマンスに問題があります。

<div data-bind="visible: isEditable()">
    <textarea data-bind="kendoEditor: { value: name }" > </textarea>
    <button type="button" data-bind="click: toggleEdit(false)">Update</button>
</div>

次の例を見ると、正しく動作しているように見えます。要素をクリックするとエディタが有効になり、更新をクリックすると変更が適用されます。

jsfiddle 1

ただし、データを追加した次の例を見ると、リスト内のすべての要素に kendoEditing バインディングが適用されているため、初期ロードが非常に遅くなります。

jsfiddle 2

まだ表示されていない要素にバインディングが適用されないようにする方法はありますか?

4

2 に答える 2

2

クリックバインディングはコードのスニペットではなく関数を取得する必要があるため、事前に非常に多くのトグルを行っています。これはよくある間違いです。

100 万人のエディターを束縛するのを避けるために、要素を表示および非表示にするのではなく、テンプレートを入れ替えるだけで済みます。

<ul data-bind="template: { name: 'itemTmpl', foreach: Items }"></ul>
<script id="itemTmpl" type="text/html">
<li>
    <div data-bind="template: isEditable() ? 'editable' : 'notEditable'"></div>
    <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>
</li>
</script>
<script id="notEditable" type="text/html">
    <span data-bind="html: name, click: toggleEdit.bind(null,true)">
    </span>
</script>
<script id="editable" type="text/html">
    <textarea data-bind="kendoEditor: { value: name }"></textarea>
    <button type="button" data-bind="click: toggleEdit.bind(null, false)">Update</button>
</script>

更新されたフィドル

于 2015-10-09T18:38:27.600 に答える