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

Question

我正在使用RP Niemeyer的Kendo-Knockout绑定，我可以让事情正常工作。我目前遇到的问题是尝试使用Kendo菜单过滤定制来过滤可观察到的列。

Kendo filterable属性对于不可观察的列('color')可以很好地工作，但我不能让它对可观察的列(‘水果’)工作。

例如，当我单击过滤器图标来过滤'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)；

但这里的问题是，数据将断开与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 view模型的代码：

<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解决了这个问题。然后，在将我的数据分配给我的模型时，我对映射对象使用了敲击映射，如下所示：

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

这使得对kendo网格的过滤和排序开箱即用。

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%'}
]

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