observable.peek() doesn't work in IE8 #891

Closed
mj1856 opened this Issue Mar 18, 2013 · 6 comments

Projects

None yet

3 participants

@mj1856
mj1856 commented Mar 18, 2013

I'm using the peek() function to get proper behavior of a Bootstrap Collapse section.

<div class="collapse" data-bind="css: { in: myobservable.peek() == 'foo' }">

The Boostrap in class has to be set on any divs you want initially opened (uncollapsed). If I don't use peek(), then it behaves funny because knockout removes the in class before boostrap can run its collapse animation.

It works just fine in most browsers, but I was testing in IE8 today and it doesn't appear to work there. I get the following error:

Unable to parse bindings
SyntaxError: Expected identifier, string or number;
Bindings value: css: { in: myobservable.peek() == 'foo' }, views/myview, [object Object]
@rniemeyer
Member

In older IE, there can be problems with using JavaScript keywords as property names. Can you try putting in in quotes like css: { 'in': myobservable() === 'foo' }. You should not need to use peek, unless you never want this value to update again.

@SteveSanderson
Contributor

IE8 doesn't like object literals with unquoted keys, if the key is a reserved word such as in. You can avoid the problem by quoting the key, for example:

<div class="collapse" data-bind="css: { 'in': myobservable.peek() == 'foo' }">

However, I'm pretty sure you don't really want to use peek like this. Doing this will completely disable Knockout's ability to update the CSS class when your observable changes. Is it possible that previously you were just forgetting to evaluate the observable by using the parens when writing the comparison? In other words, I think the code you really want is this:

<div class="collapse" data-bind="css: { 'in': myobservable() == 'foo' }">

Closing as this doesn't appear to be a KO issue, but please reopen if you disagree!

@SteveSanderson
Contributor

Oh sorry, looks like Ryan and I posted at the same time. Anyway at least we agree :)

@mj1856
mj1856 commented Mar 18, 2013

Thanks, Putting the css class name in quotes did the trick!

I do need to use peek, because Bootstrap is taking control over adding and removing the in class with its own javascript. It doesn't play nice with knockout trying to do the same thing.

@mj1856
mj1856 commented Mar 18, 2013

And thanks for the very fast answers guys!!!

@mj1856
mj1856 commented Mar 18, 2013

For posterity/reference: http://stackoverflow.com/a/8814616/634824
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words

Note towards the end of that mozilla doc, it shows using a reserved word as a valid IdentifierName. Apparently IE8 got that part wrong.

sigh - if only MS would release IE9 for WinXP we could all just be done with IE8 issues...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment