Edit one row in a list of records?

Question

I have a list of records, e.g. addresses. It's displayed using the following html5/knockout code.

<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>

I want to show a table of editable input boxes () under the row after Edit button is clicked. Is there any way without generate a big html5 code?

I want to show the following editing html below the <div> after click the Edit button. (not completed)

<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>

Answer 1

There are a few reasonable options:

1) Use the if binding to control the rendering (not just visibility) of a block of HTML. Each row of data would have an observable property called isEditing. Then, add behavioral functions to control edit/cancel/etc. Your article template would include something like the following:

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

2) If it's just one field, you might want to create a custom binding handler that adds the behavior you want to an element (it would dynamically add/remove a field). There are a few good examples on Stackoverflow of this technique.