剑道淘汰赛:调用了从与网格内的数据绑定模板改变视图模型性能的方法,打破绑定(Kendo-Knocko

2019-07-05 03:59发布

我使用RPNiemeyer`s剑道淘汰赛库。 我有一个在它剑道模板剑道网格。 在模板中存在使用淘汰赛点击绑定这就要求改变视图模型的方法的按钮。 重现步骤:

  1. 在网格中单击按钮。
  2. 一种方法被称为改变视图模型的财产,并提醒新值。
  3. 再次单击该按钮。 该按钮不起作用了。

注意:如果删除改变视图模型的一切工作正常属性的线。

请解释这是为什么不工作,任何想法和解决方案,将不胜感激的原因。 谢谢!

HTML:

<div id="grid"  data-bind="kendoGrid: { data: fruits, columns: [ 
            {
                field: 'name',
                title: 'Fruit',
                width: 50
            },
            {
                template: '<button class=\'k-button\' data-bind=\'click: function() { changeFruit() }\' >Change Fruit Name</button>',
                width: 30
            }               

         ], 
        scrollable: false, sortable: true, pageable: false }" style="height: 380px">
    </div>

JavaScript的:

var ViewModel = function() {
    this.fruit1 = {
        color: ko.observable("green"),
        name: ko.observable("apple"),
    };

    this.fruit2 = {
        color: ko.observable("orange"),
        name: ko.observable("orange"),
    };


    this.fruits = ko.observableArray([
        this.fruit1, 
        this.fruit2
    ]);

    this.changeFruit = function() {
        // this line breaks the binding, 
        // when You change the property of the viewModel
        // You cannot call this function any more
        this.fruits()[0].name("Test");
        alert(this.fruits()[0].name());
    }
};

ko.applyBindings(new ViewModel());​

http://jsfiddle.net/hXn7e/25/

Answer 1:

该网格内使用淘汰赛模板没有完全在这一点上的支持。 现在你行的约束,因为元素是那里当淘汰赛第一越过文档应用绑定。

数据更新后,行重新呈现和绑定都将丢失。

一个解决办法是使用的事件处理程序的“数据绑定”事件,重新绑定表。 这可能在全球范围内完成的,是这样的:

ko.bindingHandlers.kendoGrid.options.dataBound = function(data) {
    var body = this.element.find("tbody")[0];

    if (body) {
       ko.applyBindings(ko.dataFor(body), body);   
    }
};

下面是一个示例: http://jsfiddle.net/rniemeyer/5Zkyg/

我还添加了一个自定义绑定,以防止从敲除在第一轮结合该表中,以使得它不从数据绑定处理程序结合两次(一次整体applyBindings和一次。

归根结底,这是我想在淘汰赛,剑道,支持更好的东西,它是我计划与图书馆合作的下一件事。

下面是它如何从我已经开始了一段时间后分组工作的样本: http://jsfiddle.net/rniemeyer/xBL2B/



文章来源: Kendo-Knockout: Calling a method that changes viewmodel property from a template with data-binding inside a grid, breaks bindings