Question

I have a table that gets rendered by Knockout

<table data-bind="visible: program">
    <thead>
        <tr>
            <td>Post</td>
            <td>Name</td>
            <td>Odds</td>
            <!--ko foreach: options -->
            <td data-bind="visible: value, text: name"></td>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody data-bind="foreach: program() ? program().item: []">
        <tr>
            <td>
                <span data-bind="text: place"></span>
            </td>
            <td><span data-bind="text: name"></span></td>
            <td><span data-bind="text: odd"></span></td>

            <!--ko foreach: $parent.options -->
            <td data-bind="visible: value">
                <span data-bind="text: $parent[prop]"></span></td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

This table is rendered according to an observable I have (program). ‘program is updated via ajax calls and then assignment (program(ko.mapping.fromJS(prg))).

program has a array of items, the item count varies in size, but each item always have the needed fields.

I imagine there is a way I can set this up so that Knockout only renders for new things.

For example if my current program has 6 items in it, that creates a table with 6 rows, if i get a different program that also has 6 items in it, then the table shouldnt actually re-render the table just use whats already there. If then i have a 7 item program it would only render the single row it needed. And if 5 items came in the one after that it would simply remove the 2 it isn’t using

Does this sound possible? or am I off base? ** Also my example above has been reduced for ease, the table does also contain a few ko.computed functions.

Answer 1

My repeat binding does exactly that. It only renders new rows when the array gets larger:

<tbody>
    <tr data-bind="repeat: program() ? program().item: []">
        <td>
            <span data-bind="text: $item().place"></span>
        </td>
        <td><span data-bind="text: $item().name"></span></td>
        <td><span data-bind="text: $item().odd"></span></td>

        <!--ko foreach: options -->
        <td data-bind="visible: value">
            <span data-bind="text: $item()[prop]"></span></td>
        <!-- /ko -->
    </tr>
</tbody>

See https://github.com/mbest/knockout-repeat