Question

When using containerless syntax and calling a Knockoutjs template, the IE8 doesn’t render properly a template inside a foreach control flow. The initialization works ok, but if the items are changed, then the rendering is wrong. This happens only on IE8, 9 is ok, even 7 works.

Model

function BrowseModel() {
    var self = this;
    self.items = ko.observableArray();
    self.itemsStep = ko.observable(1);
    self.repopulate = function() {
        self.itemsStep(self.itemsStep() + 3);
        return false;
    };
    ko.computed(function() {
        var arr = [];
        for (var i = self.itemsStep(); i <= self.itemsStep() + 5; i++) {
            arr.push(i);
        }
        self.items(arr);
    }, self);
}

ko.applyBindings(new BrowseModel());

View

<a href="javascript:;" data-bind="click: repopulate">Change items</a>
<ul>
    <!-- ko foreach: items -->                                                 
        <!-- ko template: { name: 'product_template'} -->
        <!-- /ko -->  
   <!-- /ko -->
</ul>

<ul>
    <li data-bind="template: { foreach: items, name: 'product_template' }"></li>
</ul>


<br />
<div data-bind="text: ko.toJSON($data)"></div>


<script type="text/html" id="product_template">
    <li data-bind="text: $data"></li>
</script>    

I didn’t find some pattern how IE 8 behaves. The rendering is kind random.

Beside not using the containerless control flow syntax, how can I fix this?

Fiddle

LE: I’m using F12 Developer Tools if this does matter

Answer 1

Fixed jsFiddle

I’ve added a   to the inner binding and it seems to have fixed the problem. It seems like knockout in IE8 does not like nested containerless control bindings that have no content.

Note, in my experience, containerless control bindings tend to show erratic behavior in IE6-IE8. If you intend to support these browsers, I suggest you avoid containerless control bindings. Nearly all scenario’s that involve containerless control bindings can be rewritten to an alternative with a HTML element with a data-bind expression.