javascript – 使用带有knockoutjs行模板的Kendo Grid使得过滤变得不可能

我目前正在使用knockoutjs为MVVM模式构建应用程序,使用Kendo Web构建控件.
我在kendo网格中过滤/分组数据时遇到了问题.

我需要具有高度可自定义的行,因此我根据此示例选择使用行模板：

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>

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

示例：当我在’Note’整数值上进行分组时：

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

但过滤仍然是不可能的：当我进行’Note()’更改时,列过滤器菜单已从数字过滤器更改为字符串过滤器.
我想这是因为字段输入键’Note’不再匹配列输入键’Note()’了！

>我试图在字段定义中用’Note()’替换’Note’：不起作用.
>我在我的项目模型中用一个不可观察的变量替换了Note observable：一切正常,但我不能再编辑这些值,我想.

谢谢你的帮助 ！

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

编辑#2这是最终解决方案,感谢sroes：http://jsfiddle.net/camlaborde/htq45/7/

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

解决方法:

如果您创建一个将项目作为普通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

标签：javascript,mvvm,knockout-js,kendo-grid,knockout-kendo
来源： https://codeday.me/bug/20190703/1366157.html