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。

使用映射的viewmodel敲除css绑定

1 个答案: