Question

我正在使用RP Niemeyer的Kendo-Knockout绑定，我可以让事情顺利进行。我目前遇到的问题是尝试使用Kendo菜单过滤自定义来过滤可观察列。

Kendo可过滤属性适用于不可观察的列（'color'），但我无法使其适用于可观察列（'fruit'）。

例如，当我单击过滤器图标以过滤'apple'上的水果列时，console.log会显示错误：

Uncaught TypeError: (d.fruit || "").toLowerCase is not a function

我可以使用以下方法，而不是绑定到可观察数组（self.items（））：

self.items.asJS = ko.computed(function() {
return ko.toJS(self.items());

}，自我）;

但问题在于，数据将与self.items（）可观察数组断开，从而无法实现MVVM的目的。所以这不是我追求的解决方案。或许Knockout和Kendo UI之间暂时没有“可以做”。

这是HTML：

<div style="width:400px; height:150px; font-size:14px" data-bind="kendoGrid:

    {data: items,
    rowTemplate: 'itemsTmpl', useKOTemplates: true,
    filterable: { extra: false},
    columns: [
    {field: 'id', title: 'ID', type: 'number', width: '30px'},
    {field: 'color', title: 'Color', type: 'string', width:'120px'},
    {field: 'fruit' , title: 'Fruit', type: 'string', width:'95%'}
    ]
    }">

</div>

这是ko视图模型代码：

<script id="itemsTmpl" type="text/html">

    <tr style="height:5px" data-bind="focus: $root.selectRow ">
        <td data-bind="text: id"></td>
        <td>
            <span style="width:95%" data-bind="text:color"></span>
        </td>
        <td>
            <span style="width:95%" data-bind="text: fruit"></span>
        </td> 
    </tr>
</script>

<script type="text/javascript">

    var item = function (id, color, fruit) {
        var self = this;
        self.id = id;
        self.color = color;
        self.fruit = ko.observable(fruit);
    }

    var ViewModel = function () {

        var self = this;

        self.items = ko.observableArray([
        new item(1, 'black', 'apple'),
        new item(2, 'green', 'orange'),
        new item(3, 'yellow', 'banana')
        ]);

    };

    ko.applyBindings(new ViewModel());

</script>

Answer 1

我使用Knockout ES5解决了这个问题。然后，在将我的数据分配给我的模型时，我使用了带有映射的knockout-mapping 像这样的对象：

        var dataMapper = {
            create: function(o) {
                return ko.track(o.data), o.data;
            }
        };
        ko.mapping.fromJS(json, dataMapper, self.data);

这使得过滤和排序工作开箱即用，适用于淘汰剑道网格。

Answer 2

定义列时，字段名称用于检索值以进行排序和过滤。因此，如果字段名称为fruit，则会调用它来获取值：

item.fruit

但是，由于水果是可以观察到的，因此无法正常工作。我们希望字段名称为fruit()，以便其像这样被调用：

item.fruit()

要使这种情况适合您的情况，请将列定义更新为：

columns: [
  {field: 'id', title: 'ID', type: 'number', width: '30px'},
  {field: 'color', title: 'Color', type: 'string', width:'120px'},
  {field: 'fruit()' , title: 'Fruit', type: 'string', width:'95%'}
]

我唯一更改的是在水果的字段名称中添加括号。

使用Knockout-Kendo JS如何使用Kendo可过滤属性过滤绑定到ko可观察数组的列

2 个答案: