与映射视图模型的淘汰赛 css 绑定

Question

我正在创建一个如下所示的表：

<table>
  <thead>
    <tr>
        <th>Index</th>
        <th>Last Name</th>
        <th>First Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: $data">
    <tr data-bind="css: rowClass">
        <td data-bind="text: $index"></td>
        <td data-bind="text: LName"></td>
        <td data-bind="text: FName"></td>
    </tr>    
  </tbody>
</table>

我正在使用 knowckout.mapping 功能将我的数据从我的控制器中获取并编码为 json。我的 javascript 在下面。

<script type="text/javascript">
    $(function () {
        var viewModelJSON = ko.mapping.fromJSON('@Html.Raw(jsonData)');

        viewModelJSON.rowClass = ko.computed(function () {
            return 'success';
        });

        ko.applyBindings(viewModelJSON);
    });
</script>

在我为 css rowClass 添加数据绑定之前，一切都很好。我只是试图返回成功类，但 javascript 控制台报告“无法解析绑定”和“未定义 rowClass”。我也尝试过像这样声明 rowClass 函数：

viewModelJSON.rowClass = ko.computed(function () {
            return 'success';
        }, viewModelJSON);

但仍然没有运气。对我做错了什么有什么想法吗？

工作解决方案

更新我的 JavaScript 似乎解决了我的问题：

<script type="text/javascript">
    $(function () {

        var mapping = {
            create: function (options) {
                return new myImportItem(options.data);
            }
        }

        var myImportItem = function (data) {
            ko.mapping.fromJS(data, {}, this);

            this.rowClass = ko.computed(function () {
                return 'success';
            }, this);
        }

        var viewModelJSON = ko.mapping.fromJSON('@Html.Raw(jsonData)', mapping);            

        ko.applyBindings(viewModelJSON);
    });
</script>

Answer 1

在您添加css 绑定的地方，上下文将是您数组中的一个项目。但是，您已将计算的 rowClass 放置在您的根级别。

如果你想绑定它，你必须像 css: $parent.rowClass 或 css: $root.rowClass 那样做（在这种情况下它们是一样的）。

如果您希望数组中的每个项目都有一个 rowClass 计算，那么您可能需要考虑使用映射插件的 mapping options。