I have created a modal dialog with wijmo. Inside the dialog I want to display content which depends on a knockoutjs model.
<tr data-bind="visible:fields().length > 0">
<td>Enter</td>
<td>
<div data-bind="foreach:fields">
<span data-bind="text:$data"></span>
</div>
</td>
</tr>
The condition(visible:fields().length > 0) works as expected and "Enter" will be displayed if I anything is added to the observable collection. But the span(s) of the foreach will never show up.
I have created the following http://jsfiddle.net/79uh3/ which demonstrates the problem.
If the div that binds the wijdialog is commented out, the example works as expected.
It's a strange behaviour. Single solution that I found is to add default value to observable array
var VM = {
fields: ko.observableArray([""]),
newField: ko.observable(),
addItem: function(){
this.fields.push(this.newField());
}
};