0

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

<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 函数，如：

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>
4

1 回答 1

1

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

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

如果您希望数组中的每个项目都有一个rowClass计算，那么您需要查看使用映射插件的映射选项。

于 2012-11-25T03:58:38.900 回答