We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Wbpmrck2003 • 13 years ago

fantastic post!

David Rosen • 13 years ago

Excellent post, thank you!

Hans Fjällemark • 13 years ago

Interesting stuff Ryan, really worth considering when working with heavy foreach bindings. You got one small typo in the code example: <div data-bind="visible: template: { name: 'playlistTmpl', data: playlist }"></div>.

Ryan Niemeyer • 13 years ago

Hans Fjällemark typo fixed.  Thanks for spotting it!

Leland Richardson • 13 years ago

Thank's for this post, Ryan!  I am using knockout for what has the potential to be a pretty big templated list, and had not taken this into account. Now I know.

Allen Rice • 13 years ago

Awesome article, this is going to help a lot, thanks.  Question though, why are Michael's changes considered to be breaking?  

Ryan Niemeyer • 13 years ago

@google-ce30de1063f39375d3ff224867a37d54 Currently some of the bindings are coded to depend on each other.  For example, the "options" binding fires, it is assumed that the "value" binding will fire to validate that the current value is still valid.  We can compensate for that in the core code, but we can't necessarily predict how everyone has coded their custom bindings.  In some cases, people use custom bindings that are just coupled with other bindings to run extra code and don't actually have any dependencies of their own (probably a bad practice, but perfectly functional with the current code).  

So, we just need to be careful that we don't break a bunch of bindings by making this change without careful consideration (possibly start with an opt-in approach, until a major version).  

Adam Levitt • 13 years ago

Very interesting, Ryan.  Your insight is always helpful.

Wbpmrck2003 • 13 years ago

hi,i have a question:can i user ko to observe a DIV's width in the page?
For example,bind a observable to the div(using style binding of width property),and i user JQuery to modify the width of the DIV,does the observable's value got changed?(I have had a test,but it not works~)
how can it work? thanks!

Guest • 13 years ago

Yes, you can, but don't use jQuery directly (or even if you do, you may want to use the step param): 
http://jsfiddle.net/szabi/6...

kunjan • 13 years ago

Hi ,

I and my collegue
have been trying to create the custom bindinghandler for jqgrid.

We have tried the
two way binding between the jqgrid and viewModel.

 

here is the jsfiddle for the
same. 

 

I request you to
give us your suggestions to improve this work.

(a small hiccup here is while add/edit/delete it is asking for url .. Even though datatype is local. . it wasnt an issue in my project..)

kunjan • 13 years ago
kunjan • 13 years ago

here is the updated fiddle http://jsfiddle.net/kunjank...

Ken Kletzien • 13 years ago

Ryan, thanks so much for all of your work! I wanted to point out that method #2, "build your option elements using a foreach loop," doesn't work in ie (at least not ie8 or below). I think it's the same issue you have with trying to use a virtual element binding for tr in a table: it fails in ie, so you have to do it in a tbody. Same thing: your options loop example fails with the virtual element, but will work if you put it in an optgroup binding! Problem is: if you don't want it, you can't get rid of the optgroup heading on the drop-down.

Ryan Niemeyer • 13 years ago

Thanks Ken. That has come up a few times and I have been meaning to add a note to the sample to clarify.

Sam Judson • 13 years ago

Just to say, that option 2 for select/option (with containerless comments) doesn't work in IE, as it strips out comments from within a SELECT element prior to the knockout binding.

-- sorry, just realised that the previous comment also points this out, oh well.

Ryan Niemeyer • 13 years ago

Sam Judson - no problem. Thanks for the reminder. I still need to update that section.

ersensurekler • 12 years ago

Has been great article.

Damiano Fusco • 12 years ago

What about using on <optgroup> for the foreach binding? The only issue i still don't have resolved is how to remove the indentation of each option text.

i.e.

<select data-bind="value:selectedId">
<optgroup data-bind="foreach:list" style="display:none">
<option data-bind="value:Id, text:Name"></option>
</optgroup>
</select>

jsFiddle: http://jsfiddle.net/damiano...

John • 12 years ago

Hi, I have textarea and a combo, each line of the text area should be as an option on the combo. For this I've written a computed observable using read and write options, the model is updated perfectly (debugged on firebug) but the html combo doesn't reflect the changes when options are modified or deleted. What could be wrong. Here is the jsfiddle: http://jsfiddle.net/SuperJo...

John • 12 years ago

Solved

Retsam • 11 years ago

This is no longer the case with KOv3, correct? If so, perhaps a note could be edited onto this blogpost indicating this?

Ryan Niemeyer • 11 years ago

Retsam - Thanks for pointing that out! I added a note to the beginning of the post.