I am trying to display information about the selected item in a list as well as highlight the row that is selected. This is what I have:
http://jsfiddle.net/blankasaurus/qUydu/6/
1) When I try to set the CurrentDisplayThing = item it doesn't do what I want it to do (which is update the Display div with the selected item). I also tried $.extend(CurrentDisplayThing, item); Am I going to have to set each property individually or something? I have about 30 of them on my real project.
2) The other thing i wanted to figure out is how to go about highlighting the row that I just clicked the proper way using Knockout.
PS: For what I am actually doing I am using the mapping plug-in and both Things and CurrentDisplayThing are coming from my .NET model I pass in. I am assuming what I have in JS Fiddle mirrors the way mapping would set this up?
Here is a fiddle that solves both problems.
http://jsfiddle.net/johnpapa/6FCEe/
1) The selected item property is actually an observable (which is a function). So the value must be passed into the observable function like this:
self.model.CurrentDisplayThing(item);
2) Highlighting the row can be done through the css binding in Knockout. The css binding accepts an object with the name of the css class (ex: selected) and an expression (ex: isSelected). In the example below, when isSelected is true, the class will be applied, otherwise it is removed.
<tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">
Check the fiddle out for the full example.
You can't just assign Knockout observables using code like
CurrentDisplayThing = item
And you can't $.extend them either, because in the end that does assignments too.
Instead you have to use the function syntax:
self.model.CurrentDisplayThing(item);
Similarly you have to use the function syntax when accessing:
self.model.CurrentDisplayThing().ID
Working example: http://jsfiddle.net/HUjau/1/
