0

住所などのレコードのリストがあります。次のhtml5/knockoutコードを使用して表示されます。

<section id="lists" data-bind="foreach: addresses, visible: addresses().length > 0">
    <article>
        <div>
            <button>Edit</button>
            <span data-bind="text: DisplayAddress"></span>
        </div>
        <p class="error" data-bind="visible: ErrorMessage, text: ErrorMessage"></p>
    </article>
</section>

[編集]ボタンをクリックした後、行の下に編集可能な入力ボックス（）の表を表示したいと思います。大きなhtml5コードを生成せずに方法はありますか？

[編集]ボタンをクリックした後、下に次の編集HTMLを表示したいと思います。（まだ終わってない）<div>

<div>
    <table>
        <tr>
            <th>Street address</th><th>Apt#</th><th>City</th><th>State</th><th>Zip</th>
        </tr>
        <tr>
            <td><input type="text" class="col1"/></td>
            <td><input type="text" class="col2"/></td>
            <td><input type="text" class="col3"/></td>
            <td><input type="text" class="col4"/></td>
            <td><input type="text" class="col5"/></td>
        </tr>
    </table>
    <button data-bind="click: saveAddress">Save</button>
    <button data-bind="click: cancelAdding">Cancel</button>
</div>
4

1 に答える 1

1

いくつかの合理的なオプションがあります：

1）ifバインディングを使用して、HTMLブロックのレンダリング（可視性だけでなく）を制御します。データの各行には、と呼ばれる監視可能なプロパティがありますisEditing。次に、動作関数を追加して、編集/キャンセルなどを制御します。記事テンプレートには、次のようなものが含まれます。

<div data-bind="if:isEditing">
   <input type="text" data-bind="value: DisplayAddress" />
</div>

2）フィールドが1つだけの場合は、要素に必要な動作を追加するカスタムバインディングハンドラーを作成することをお勧めします（フィールドを動的に追加/削除します）。このテクニックのStackoverflowにはいくつかの良い例があります。

于 2013-02-10T15:37:27.057 に答える