2

我正在使用 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>
4

2 回答 2

2

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

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

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

于 2015-09-03T06:11:23.430 回答
0

定义列时，字段名称用于检索值以进行排序和过滤。因此，如果字段名称是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%'}
]

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

于 2018-08-24T20:15:54.300 回答