Dữ liệu lưới Knockout KendoBound events

Question

Tôi có lưới kendo ui sử dụng bộ knockout-kendo.

Tôi có một vài nút tùy chỉnh trong một cột của lưới, tức là thực hiện cuộc gọi ajax để chỉnh sửa mục nhập trong div khác, xóa một hoặc kiểm tra hàm editId để gọi hàm. Vấn đề của tôi là, rằng cả hai sự kiện đều bị bắn hai lần! Bên cạnh đó đối với tôi, có vẻ như sự kiện dataBound và sự kiện dataBinding là như nhau.

Heres một fiddle

this.dataBound = function(){ 
    alert('dataBound'); 
}; 

this.dataBinding = function(){ 
    alert('dataBinding'); 
}; 

Tôi đã thử một số cách tiếp cận khác nhau.

Heres khác fiddle

this.gridConfig = { 
    data: self.myData, 
    datasource: { 
     data: 'data' 
    }, 
    dataBound: function(){ 
     alert('dataBound'); 
    }, 
    dataBinding: function(){ 
     alert('dataBinding'); 
    }, 
}; 

Các sự kiện được kích hoạt khi lưới điện đang bị ràng buộc, và khi dữ liệu được ràng buộc. Nhưng làm thế nào tôi có thể chắc chắn, để chỉ nhận được một sự kiện khi tất cả dữ liệu ở đó?

Có ai biết điều gì đang xảy ra ở đó không? BTW Tôi sử dụng plugin ánh xạ.

Answer 1

Sự kiện dataBound đang kích hoạt vì nhiều lý do khác nhau. Lần đầu tiên nó cháy, nếu bạn console.log() sự kiện này, bạn sẽ thấy rằng:

• e.sender._data là một mảng trống []
• e.element[0] là div.k-grid.k-widget

Khi đám cháy sự kiện cho một lần thứ hai, các tính chất tương tự hiển thị như:

• e.sender._data là một mảng có độ dài ba, c mục ontaining như: { color: "green", name: "apple", uid: "..." }
• e.element[0] là div.k-grid.k-widget (giống nguyên tố)

Mà dường như ngụ ý rằng lưới của bạn là trong thực tế dữ liệu ràng buộc với chính nó hai lần.

Nếu tôi phải đoán, hãy KO ko.applyBindings(new ViewModel()); khởi chạy đối tượng và kích hoạt sự kiện. Sau đó, sự kiện này được kích hoạt trở lại khi kendo cố gắng liên kết dữ liệu phần tử trong nội bộ.

Để tránh điều này, xem: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

Nơi bạn có thể sử dụng một cái gì đó tương tự như:

var grid = $("#grid").data("kendoGrid"); 
grid.bind("dataBinding", grid_dataBinding); 
grid.dataSource.fetch(); 

Khi cấu hình ban đầu ràng buộc được thiết lập để autoBind: false

Vì vậy mà bạn không vô tình bắt được sự kiện false dữ liệu đầu tiên.

Nếu có thời gian, tôi sẽ quay lại với JSFiddle để minh họa điều này.

Giải pháp 1: Điều này Fiddle sẽ giúp ích.

Giải pháp 2:

Đặt autoBind: false để lưới điện không tự động ràng buộc. (@ Jason9187)

Là một người dùng khác đề cập, bạn có thể biến ban đầu tự động ràng buộc tắt bằng cách thay đổi một thiết lập được đề cập trong tài liệu telerik trên:

Về cơ bản, sửa chữa này trong cách tiếp cận đầu tiên của bạn:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound }"></div>

trở thành:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound, autoBind: false }"></div>

Hoặc bằng cách thêm cùng một thuộc tính vào phương pháp thứ hai của bạn.

Fiddle: http://jsfiddle.net/hXn7e/45/

Answer 2

Đặt autoBind: false để lưới điện không tự động ràng buộc.

this.gridConfig = { 
    data: self.myData, 
    autoBind : false, 
    datasource: { 
     data: 'data' 
    }, 
    dataBound: function(){ 
     alert('dataBound'); 
    }, 
    dataBinding: function(){ 
     alert('dataBinding'); 
    }, 
};