0

大きなグリッド ビューを編集するための次のコード (読みやすいように簡略化されています) があります。ノックアウト スクリプトは、行ごとに非表示の編集行を生成します。[編集] ボタンをクリックすると行が再表示され、ユーザーが値を編集できるようになります。いくつかの html<select>コントロールには多くの<option>タグが含まれているため、生成される html は巨大です。

「編集」ボタンをクリックした後、編集行を動的に挿入することはできますか? または、ノックアウト/jQuery を使用してこの一般的なケースを処理するより良い方法はありますか?

<table>
    <thead>.... </thead>
    <tbody data-bind="foreach: Contacts">
        <tr data-bind="visible: isEditing==false">
            <td><span data-bind="text:Name"></span></td>
            <td><span data-bind="text: Phone"></span></td>
            <td><span data-bind="text: State"></span></td>
            <td><a href="#" data-bind="click: startEdit">Edit</a></td>
        </tr>
        <tr data-bind="visible: isEditing">
            <td>
                First Name:<input data-bind="value: FirstName" />
                Last Name:<input data-bind="value: LastName" />
            </td>
            <td><input data-bind="value: Phone" /></td>
            <td><select data-bind="value: State">...huge options...</select></td>
            <td><a href="#" data-bind="click: updateContact">Done</a></td>
        </tr>
    </tbody>
4

2 に答える 2

1

あなたのコードを見ると、startEdit ボタンがすべての連絡先の編集行を表示するのか、クリックした連絡先だけの編集行を表示するのかわかりません。編集行のみを表示する場合は、 Visibleの代わりにIfバインディングを使用することを検討してください。

<tr data-bind="if: isEditing==false">...</tr>
...
<tr data-bind="if: isEditing">...</tr>

Visible を使用すると、編集行はまだそこにあり、すべてのデータバインディングが適用されますが、表示されません。IsEditing が true でない限り、If 編集行はまったく存在しません。ビッグ データ グリッドでは、これによりページの読み込みが大幅に高速化されます。

詳細については、If バインディングに関するノックアウト ドキュメントを参照してくださいhttp://knockoutjs.com/documentation/if-binding.html

于 2013-02-12T04:34:21.637 に答える
1

必要なものにテンプレートを使用し、ビューモデルにオブザーバブルを配置して、テンプレートの名前を返します。編集ボタンをクリックすると、監視可能な currentTemplate の名前が編集テンプレートに変更され、HTML が自動的に交換されます。

<tbody data-bind="foreach: Contacts">
    <div data-bind="template: currentTemplate"></div>
</tbody>

<script type="text/html" id="contact-view-template">
    <tr>
         <td><span data-bind="text:Name"></span></td>
         ...
    </tr>
</script>

<script type="text/html" id="contact-edit-template">
    <tr>
        <td>
        First Name:<input data-bind="value: FirstName" />
        Last Name:<input data-bind="value: LastName" />
        </td>
        ...
    </tr>
</script>


var Contact = function () {
    var self = this;

    self.currentTemplate = ko.observable( 'contact-view-template' );

    self.onEditClicked = function () {
        self.currentTemplate( 'contact-edit-template' );
        // Some other logic
    };

    self.onSaveClicked = function () {
        self.currentTemplate( 'contact-view-template' );
        // Some other logic
    };
}
于 2013-02-11T20:53:19.920 に答える