asp.net-mvc-4 - 检测 html table Knockout/ASP.NET MVC 中的选定行

Question

我已经使用 ko.mapping.fromJS(Model) 将 ASP.NET MVC viewModel 加载到 KnockoutJS 中。

我的 viewModel 看起来像这样:

public IEnumerable<FunkyThing>funkyThings;
public FunkyThing selectedFunkyThing;

然后我在我的 HTML View 中得到了一个看起来像这样的表格

<tbody data-bind="foreach: funkyThings">
    <tr>
        <td data-bind="text:name"></td>  
        <td data-bind="text:funkiness"></td>  
        <td><a href='#' title="Select Funky Thing" data-bind="click: $root.selectFunkyThing"></a>
       </td>
    </tr>
</tbody>

这张 table 一切都很好。点击 select funky thing 链接愉快地调用 selectFunkyThing 函数:

    model.selectFunkyThing= function (funkyThing) {
        window.location = '@Url.Action(MVC.FunkyThingController.Index())' + "?funkyThingID=" + funkyThing.funkyThingID();

    };

这反过来又刷新了页面。重新加载 MVC View 模型，并用选定的 FunkyThing 填充 selectedFunkyThing，然后从 MVC View 模型中重新读取 knockout View 模型。到现在为止还挺好。

然后我想更新表格以突出显示所选条目。
所以我更新了 tr 行如下:

<tr data-bind="css:{'selected': $root.isSelected()}">

并创建了新的 knockout 功能:

 model.isSelected = function (funkyThing) {
            return funkyThing.funkyThingID== model.selectedFunkyThing.funkyThingID;

        };

但是......它不起作用。
Chrome 会抛出一个 JavaScript 异常，指出 FunkyThing 参数未定义。
从技术上讲，我认为我可以通过更改 MVC viewModel 以在数组中的每个 FunkyThing 上实际设置一个 isSelected 来解决它。但是我认为必须远离 knockout ？

Answer 1

你很亲近!我添加了 ko.utils.unwrapObservable打电话是因为我敢打赌 funkyThingID 是一个可观察的，而不仅仅是一个直接的属性 - 你自己在 selectFunkyThing 中做了这个功能。你也可以执行它们。不过，我喜欢 unwrap 的冗长。

model.isSelected = function (funkyThing) {
  var thisId = ko.utils.unwrapObservable(model.selectedFunkyThing.funkyThingID);
  return ko.utils.unwrapObservable(funkyThing.funkyThingID) == thisId;
};

然后在您的文档中，当 ko 解析绑定(bind)时，您实际上必须执行此函数

<tr data-bind="css:{'selected': $root.isSelected($data)}">