4

我目前正在使用 MVVM 模式的 knockoutjs 和用于控件的 Kendo Web 构建一个应用程序。我对剑道网格中的数据进行过滤/分组时遇到了一些问题。

我需要有高度可定制的行，所以我根据这个示例选择使用行模板：

http://rniemeyer.github.io/knockout-kendo/web/Grid.html

我还需要与网格进行双向绑定，因为我需要添加/删除/更新项目。

网格：

<div data-bind="kendoGrid: {    
    data: LienActionIndicateurPourFicheCollection, 
    widget: indicateurWidget,
    rowTemplate: 'indicateurRowTmpl', 
    useKOTemplates: true,
    dataSource : {
        schema: {
            model: {
                fields: {
                    Code: { type: 'string' },
                    Titre: { type: 'string' },
                    Note: { type: 'number' }              
                }
            }
        },
    },
    columns: [            
       { title: '#', width: 30 },
       { field: 'Code', title: 'Code', width: 80 },
       { field: 'Titre', title: 'Titre', width: 150 },
       { field: 'Note', title: 'Note', width: 80 }]
    }">
</div>

行模板：

<script id="indicateurRowTmpl" type="text/html">
    <tr">
        <td>
            <button data-bind="visible: $root.isInEditMode, click: removeIndicateur"
                    class="common-button delete-button"></button>
        </td>
        <td data-bind='text: Code'></td>
        <td data-bind='text: Titre'></td>
        <td data-bind='text: Note'></td>
    </tr>
</script>

当我使用网格时，它工作正常，期待当我使用分组/过滤时：就像网格使用可观察对象而不是值来执行操作一样。

示例：当我对“注意”整数值进行分组时：在此处输入图像描述

为了防止这种情况，我在列定义中将“field:'Note'”替换为“field:'Note()'”：现在分组工作正常，因为网格使用整数值而不是函数。

但是过滤仍然是不可能的：当我进行'Note（）'更改时，列过滤器菜单已从数字过滤器更改为字符串过滤器。我想这是因为字段输入键“Note”不再与列输入键“Note()”匹配！

  • 我试图在字段定义中用'Note（）'替换'Note'：不起作用。
  • 我已经用我的项目模型中的不可观察变量替换了 Note observable：一切正常，但我无法再编辑这些值，我想要。

谢谢你的帮助 ！

编辑：这里有一个 jsfiddle 复制错误：http: //jsfiddle.net/camlaborde/htq45/1/

EDIT#2 这是最终的解决方案，感谢 sroes：http: //jsfiddle.net/camlaborde/htq45/7/

EDIT#3 最终解决方案加上内联网格版：http: //jsfiddle.net/camlaborde/8aR8T/4/

4

2 回答 2

2

如果您创建一个以普通 JS 对象形式返回项目的计算对象，则它可以工作：

this.items.asJS = ko.computed(function() {
    return ko.toJS(this.items());
}, this);

http://jsfiddle.net/htq45/2/

ko.toJS(this.items)直接放入绑定不起作用的原因是 kendo 跟踪绑定中各个选项的方式。Knockout.js 人 RP Niemeyer 教我这个：Dynamically enable/disable kendo datepicker with Knockout-Kendo.js

于 2014-01-28T09:15:31.790 回答
0

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

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

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

于 2015-09-03T23:21:47.883 回答