使用Knockoutjs显示Clicked Item

Question

我正在尝试显示列表中所选项目的信息，并突出显示所选的行。这就是我所拥有的：

http://jsfiddle.net/blankasaurus/qUydu/6/

1）当我尝试设置CurrentDisplayThing = item时，它不会按照我想要的方式执行（这是使用所选项目更新显示div）。我也试过$.extend(CurrentDisplayThing, item);我是否需要单独设置每个属性或什么？在我的真实项目中，我有大约30个。

2）我想弄清楚的另一件事是如何突出显示我刚用Knockout点击正确方法的行。

PS：对于我实际在做的事情，我正在使用映射插件，而Things和CurrentDisplayThing都来自我传入的.NET模型。我假设我在JS Fiddle镜像中的映射将如何设置它？

Answer 1

这是解决这两个问题的小提琴。

http://jsfiddle.net/johnpapa/6FCEe/

1）所选的item属性实际上是一个observable（这是一个函数）。因此必须将值传递给可观察函数，如下所示：

self.model.CurrentDisplayThing(item);

2）突出显示行可以通过Knockout中的css绑定完成。 css绑定接受一个具有css类名称的对象（例如：选中）和一个表达式（例如：isSelected）。在下面的示例中，当isSelected为true时，将应用该类，否则将删除该类。

<tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">

检查完整示例的小提琴。

Answer 2

你不能只使用像

这样的代码来分配Knockout observable

CurrentDisplayThing = item

你也不能$.extend他们，因为最终也会做作业。

相反，您必须使用函数语法：

self.model.CurrentDisplayThing(item);

同样，访问时必须使用函数语法：

self.model.CurrentDisplayThing().ID

工作示例：http://jsfiddle.net/HUjau/1/