jQuery templates with nested loops - not data binding

513 views
Skip to first unread message

Kevin King

unread,
May 2, 2011, 10:29:11 AM5/2/11
to KnockoutJS
Hey guys,

First, love the library! It seems very well thought out and can
obviously make very complicated things simple and straight-forward.

My first snag has come when trying to bind observable arrays to a
template that is looping through an array of objects, then using the
current index to access the value of the first array. Here is a brief
example that shows exactly what I'm trying to do: http://jsfiddle.net/h7Ua9/1/

I'm sending the viewModel to a page method to check the data, and if I
try and change the value in a textbox, the change is not captured.
I'm not sure if it's a problem with my KS config, or a limitation of
the templates.

Any help would be greatly appreciated, thanks!

- Kevin

rpn

unread,
May 2, 2011, 12:30:16 PM5/2/11
to knock...@googlegroups.com
Hi Kevin-
observableArray's will track changes to the array (pushing items, removing items, setting the value to an entirely new array, etc.).  However, it will not track changes to individual items in your array.  You would need an observable to bind against to get two-way binding.  

Here is one approach to accomplish this from your code: http://jsfiddle.net/rniemeyer/d6vUP/

I map your amounts array to a structure that contains objects that look like { amount: ko.observable(value) }, then bind against the amount observable.

Then, just in case you need it, I overrided the toJSON function for your product type, so that the resulting JSON will not include the extra "amount" property and will again be the array of just strings.

Hope this helps.  

You were also missing a ")" after your first product, so the second was not a part of the products array.


Kevin King

unread,
May 2, 2011, 2:08:58 PM5/2/11
to KnockoutJS
Fantastic!!!!!!!!!!!!!!!!!!!!!!!!!!

Thank you so much!

Derek Greer

unread,
Jun 7, 2011, 11:36:47 AM6/7/11
to KnockoutJS
The posted example doesn't seem to work.

Jeff Sheldon

unread,
Jun 7, 2011, 11:59:34 AM6/7/11
to knock...@googlegroups.com
Hmm..Working on my end.

rpn

unread,
Jun 7, 2011, 12:21:21 PM6/7/11
to knock...@googlegroups.com
Are you using IE9 by chance?  I know that IE9 doesn't like the MIME type that GitHub uses to serve up script files and can refuse to load the script.  

Here is a copy with the scripts referenced from elsewhere: http://jsfiddle.net/rniemeyer/d6vUP/9/

Also, not that it is GitHub's fault, as they are supposed to be serving up the source code in text files and not being used as some kind of CDN.

Jeff Sheldon

unread,
Jun 7, 2011, 12:29:22 PM6/7/11
to knock...@googlegroups.com
Well there ya go, someone get on the horn with Google and tell em to mirror .latest.debug.js to google libraries.   Problem solved. :)
Reply all
Reply to author
Forward
0 new messages