在Knockout-Kendo JS中，如何使用Kendo filterable属性对绑定到可观察数组的列进行过滤

Question

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

Kendo filterable属性对于非可观察列('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之间没有"can do"。

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解决了这个问题。然后，当我将数据分配给我的模型时，我使用了带有映射的击倒映射对象:

        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是一个可观察对象，所以这行不通。我们希望字段名是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%'}
]

我唯一改变的是将圆括号添加到fruit的字段名中。