Question

This is my template:

<tr>
    <td>
        <table>
            <thead>
                <th>
                    <span>Option name:</span>
                </th>
            </thead>
            <tbody data-bind="template: {name: 'optionChoiceTemplate', foreach: choices, templateOptions:{choiceArray: choices} }"></tbody>
        </table>
        <button data-bind="click: function(){choices.push('');}">Add new</button>
    </td>
</tr>

But when I click the “Add new” button, my view doesn’t update to include the new option with the empty string. I’ve checked in the debugger that the empty string is added to the choices, and I’ve made sure that choices is an observableArray, what else might be going wrong?

Answer 1

The issue is that when using the jQuery Templates plugin with the template binding with the foreach option, empty strings are treated as null values and are not rendered.

You could work around this by using an object {text: ''} and binding against text or by pushing something other than an empty string (like a single space).

Alternatively, if you are able to move to Knockout 2.0 and use the native templates, then your empty string items will be rendered properly.