CODEWITHSUNDEEP
javascriptknockout.jsinternet-explorer-8
Adrian Iftode
Adrian Iftode

Reputation: 15673

Containerless control flow syntax - the templates don't render properly with IE8

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

Upvotes: 2

Views: 3460

Answers (2)

Marc D Anderson
Marc D Anderson

Reputation: 479

I've had luck with this structure in IE8. When I tried to keep the containerless stuff separate as you show in the original post, IE8 complained. By using the syntax shown below, it works fine.

<table id="mam-listing-table" border="0" width="100%" cellpadding="2" cellspacing="0">
    <thead>
        <tr valign="top">
            <th class="ms-vh" nowrap="">Team</th>
            <th class="ms-vh" nowrap="" colspan="99">Note Count</th>
        </tr>
        <tr valign="top">
            <th class="ms-vh" nowrap=""></th>

            <!-- ko foreach: Months -->
                <th class="ms-vh" nowrap="" data-bind="text: $data "></th>
            <!-- /ko -->

            <th class="ms-vh" nowrap="" data-bind="text: 'TOTAL as of ' + moment().format('MM/DD/YY')"></th>
        </tr>
    </thead>

    <tbody>

        <!-- ko template: { name: 'Site', foreach: Sites} -->
        <!-- /ko -->  
        <!-- ko template: { name: 'Total'} -->
        <!-- /ko -->  

    </tbody>

</table>

Upvotes: 0

Martin Devillers
Martin Devillers

Reputation: 18012

Fixed jsFiddle

I've added a &nbsp; 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.

Upvotes: 5

Related Questions