knockout.js - kendoui - Kendo-Knockout: Llamar a un método que cambia la propiedad de viewmodel de una plantilla con enlace de datos dentro de una grilla, rompe enlaces

kendo ui developer

Question

Estoy usando la biblioteca kendo-knockout de RPNiemeyer. Tengo una grilla de kendo con una plantilla de kendo. En la plantilla hay un botón que utiliza el enlace de clic inactivo que llama a un método que cambia el modelo de vista. Pasos para reproducir:

1. Haga clic en el botón en la cuadrícula.
2. Se llama un método que cambia la propiedad de viewModel y alerta el nuevo valor.
3. Haga clic en el botón otra vez. El botón no funciona más.

Nota: Si elimina la línea que cambia la propiedad del modelo de vista todo está funcionando bien.

Por favor explique el motivo por el cual esto no funciona y cualquier idea y solución será muy apreciada. ¡Gracias!

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

El uso de plantillas Knockout dentro de la grilla no es totalmente compatible en este punto. En este momento su fila está vinculada, porque los elementos están ahí cuando Knockout pasa primero sobre el documento para aplicar enlaces.

Después de actualizar los datos, las filas se vuelven a renderizar y se pierden los enlaces.

Una solución es utilizar un controlador de eventos para el evento "dataBound" que vuelve a enlazar la tabla. Esto podría hacerse globalmente, algo así como:

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

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

Aquí hay una muestra: http://jsfiddle.net/rniemeyer/5Zkyg/

También agregué un enlace personalizado que evita que Knockout vincule la tabla en la primera pasada, por lo que no está limitada dos veces (una vez global applyBindings y una vez desde el controlador dataBound.

En última instancia, esto es algo que quiero apoyar mejor en Knockout-Kendo y es lo siguiente en lo que planeo trabajar con la biblioteca.

Aquí hay una muestra de cómo podría funcionar desde una sucursal que había comenzado hace un tiempo: http://jsfiddle.net/rniemeyer/xBL2B/