Knockout issues with IE8 bindings

Question

I'm working on a web project, and we want to try to use KnockoutJS. To start, I build my app with Chrome (cause on the official, Knockout seems to work with IE8), but when I try my web application in IE8, I got many exceptions :

HTML :

<ul class="nav nav-tabs" id="tabs" data-bind="foreach: items">
    <li data-bind="'id': 'id', css: { active: 'id' == $parent.selectedTab().id }, 'click': $parent.changeTab">
        <a data-toggle="tab" data-bind="text: name, attr: { 'href': 'href' }"></a>
    </li>
</ul>

JS :

var tabs = [
    new TabViewModel(1, "Tab 1", true),
    new TabViewModel(2, "Tab 2", true),
    new TabViewModel(3, "Tab 3", false),
];

function TabViewModel(id, name, enabled) {
    var self = this;

    self.id = ko.observable("test" + id);
    self.name = name;
    self.paneId = "tab" + id;
    self.href = ko.observable("#tab" + id);
    self.displayId = "header_tab" + id;
    self.enabled = ko.observable(enabled);

    ko.bindingHandlers.changeStates = {
        init: function (element, valueAccessor) {
            var enable = valueAccessor();
            if (enable) {
                $(element).removeClass("disabled");
            } else {
                $(element).addClass("disabled");
            }
        },
        update: function (element, valueAccessor) {
            var enable = valueAccessor();
            if (enable) {
                $(element).removeClass("disabled");
            } else {
                $(element).addClass("disabled");
            }
        }
    }
}

function SurveyViewModel(tabs) {
    var self = this;

    self.items = ko.observableArray(tabs);
    self.selectedTab = ko.observable(self.items()[0]);
    self.changeTab = function (tab) {
        if (tab.enabled())
            self.selectedTab(tab);

        return true;
    };
}

ko.applyBindings(new SurveyViewModel(tabs));

I have issues on :

2 line, the 'changesStates' throw exception : Unable to parse bindings. Message: TypeError: Object expected; Bindings value
3 linen with the href property : Error: Unable to parse bindings. Message: TypeError: 'href' is undefined

Thanks in advance

What are the quotes around your properties in your data-bind attribute for? — CodingIntrigue, Jul 11 '13 at 13:20
do you know that to bind value to id attribute you should use the binding attr ? — ebram khalil, Jul 11 '13 at 13:22
What version of knockout are you using? I get no errors in IE8. See http://jsfiddle.net/DoctorMick/PNc9P/ — DoctorMick, Jul 11 '13 at 13:28

score 6 · Accepted Answer · answered Jul 11 '13 at 13:19

6

I am pretty sure it's this:

var tabs = [
    new TabViewModel(1, "Tab 1", true),
    new TabViewModel(2, "Tab 2", true),
    new TabViewModel(3, "Tab 3", false),
];

You have an extra comma at the end. IE isn't very smart, so it thinks you meant to have a 4th item in the array that was null.

answered Jul 11 '13 at 13:19

woz

10,888
3
34
64

That would explain an IE7 issue, not IE8. – Adam Jenkins Jul 11 '13 at 13:23
I think the problem exists in IE8 too. A few questions mention this, including [this one](http://stackoverflow.com/questions/7246618/trailing-commas-in-javascript). – woz Jul 11 '13 at 13:28
Thanks, it was your solution... I'm so ashamed. – Joffrey Kern Jul 11 '13 at 13:31
2

@JoffreyKern Oh, I would definitely blame Microsoft for this, not yourself! :) – woz Jul 11 '13 at 13:33

Knockout issues with IE8 bindings

1 Answers1