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

【问题标题】：With Knockout-Kendo JS how to filter on a column bound to ko observable array using Kendo filterable property使用 Knockout-Kendo JS 如何使用 Kendo 可过滤属性过滤绑定到 ko 可观察数组的列
【发布时间】：2015-07-10 01:47:00
【问题描述】：

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

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

例如，当我单击过滤器图标过滤“苹果”上的水果列时，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>

【问题讨论】：

标签： knockout.js kendo-ui kendo-grid knockout-kendo

【解决方案1】：

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

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

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

【讨论】：

【解决方案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%'}
]

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

【讨论】：