Đang cập nhật SlickGrid với Knockoutjs qua dependentObservable

Question

Tôi đang sử dụng SlickGrid với knockout.js dựa trên ví dụ http://jsfiddle.net/rniemeyer/A9NrP/

Tôi có populating lưới và nút add làm việc theo ví dụ. Vấn đề tôi gặp phải là khi tôi cập nhật các thuộc tính hàng của viewmodel của tôi thông qua một ko.dependentObservable phần 'update' của ko.bindingHandlers được kích hoạt nhưng lưới slick không nhận các thay đổi.

html định nghĩa các ràng buộc:

<div id="grid" data-bind="slickGrid: { data: rows, columns: columns }"></div> 

SlickGrid mã (tương tự như ví dụ):

var grid; 
ko.bindingHandlers.slickGrid = { 
    init: function (element, valueAccessor) { 
     var settings = valueAccessor(); 
     var data = ko.utils.unwrapObservable(settings.data); 
     var columns = ko.utils.unwrapObservable(settings.columns); 
     var options = ko.utils.unwrapObservable(settings.options) || {}; 
     grid = new Slick.Grid(element, data, columns, options); 
    }, 
    update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
     var settings = valueAccessor(); 
     // I can see the correct data here but the grid does not update 
     var data = ko.utils.unwrapObservable(settings.data); 
     grid.render(); 
    } 
} 

mô hình của tôi:

myViewModel = { 
data : ko.observableArray(), 
tabs: ['High', 'Medium', 'Low'], 
rows : ko.observableArray([]), 
columns : [ 
     { 
      id: "id", 
      name: "ID", 
      field: "id" 
     }, 
     { 
      id: "Location", 
      name: "Location", 
      field: "Location" 
     }, 
     { 
      id: "Comment", 
      name: "Comment", 
      field: "Comment" 
     } 
     ], 
addItem: function() { // this works and SlickGrid adds a new row 
    this.rows.push(new ModelRow(0, "New", 5.00)); 
}, 

}

Mã làm cho ajax c tất cả, và cháy ko.bindingHandlers.slickGrid.update nhưng doesnt slickgrid dường như đón những thay đổi, các ajax không trả lại dữ liệu hợp lệ, và được kích hoạt khi người dùng nhấp vào một liên kết:

ko.dependentObservable(function() { 
    if (this.data.lastAlarmRequest) this.data.lastAlarmRequest.abort(); 
     this.data.lastAlarmRequest = $.get("/audit/alarmsdata/high", null, this.rows); 
}, i2owater.viewmodels.AlarmsForViewModel); 

Tại sao addItem chức năng làm việc nhưng không phải là ko.bindingHandlers.slickGrid.update? Trong chức năng cập nhật, tôi có thể thấy dữ liệu chính xác mà lưới điện phải được liên kết. Có phải vì tất cả dữ liệu trong thuộc tính hàng bị ghi đè?

CẬP NHẬT: Tôi đã cố gắng sử dụng grid.invalidate(); nhưng nó không làm việc và cũng đã thấy rằng các chức năng addItem ngừng hoạt động một lần ko.dependentObservable được thực hiện

Answer 1

Tôi chỉ có cùng một vấn đề và đã tìm thấy các giải pháp, thay đổi mã cập nhật của bạn như sau:

update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
     var settings = valueAccessor(); 
     // I can see the correct data here but the grid does not update 
     var data = ko.utils.unwrapObservable(settings.data); 
     grid.setData(data,true) 
     grid.render(); 
    } 

Nhân tiện, tham số đúng trong setData cho biết nếu bạn muốn lưới cuộn trở lại đầu hay không.

Answer 2

Tôi đã cập nhật jsfiddle rất hữu ích của rniemeyer để sửa lỗi cuộn. Trong bản gốc, hãy thử thêm 20 hàng sau đó sử dụng thanh cuộn dọc và bạn sẽ thấy sự cố giao diện người dùng. Vấn đề là scrollpane không chính xác tính toán kích thước khung hình, do đó thanh cuộn rung lên.

Đây là phiên bản cập nhật.

EDIT: Knockout và slickgrid đã được cập nhật vì vậy tôi đã cập nhật các fiddle: EDIT: Và một lần nữa:

http://jsfiddle.net/5ddNM/79/

Lưu ý những điều sau:

grid.resizeCanvas(); 

Answer 3

Trong trường hợp của tôi, tôi cần thiết để sử dụng slickgrid và knockout với một viewmodels khác liên kết với các điều khiển khác nhau. Tôi đã sử dụng http://jsfiddle.net/hlascelles/5ddNM/ làm ví dụ và một vài thứ cố định ở đó. Sử dụng http://jsfiddle.net/Schnapz/z4YLD/2/ hoặc xem mô tả bên dưới.

Khai báo lưới, Mục và chế độ Xem mô hình bạn có thể để lại như được viết trong ví dụ.Nhưng, ràng buộc cần được phổ biến cho tất cả các mô hình bao gồm ViewModel bản thân (gọi nó trong PageLoad hoặc khác):

ko.applyBindings(); 

Và addItem sẽ trông như thế này:

addItem: function() { 
    viewModel.items.push(new Item(0, "New", 5.00)); 
}, 

Bởi vì sử dụng 'này' sẽ không làm việc ở đây.

Sau đó, tùy chỉnh chất kết dính nên trông như thế này (token từ một ví dụ khác ở đâu đó):

ko.bindingHandlers.slickGrid = { 
init: function (element, valueAccessor) { 
    var settings = valueAccessor(); 
    var data = ko.utils.unwrapObservable(settings.data); 
    var columns = ko.utils.unwrapObservable(settings.columns); 
    var options = ko.utils.unwrapObservable(settings.options) || {}; 
    grid = new Slick.Grid(element, data, columns, options); 
}, 
update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
    var settings = valueAccessor(); 
    var data = ko.utils.unwrapObservable(settings.data); //just for subscription 
    grid.setData(data, true); 
    grid.resizeCanvas(); // NB Very important for when a scrollbar appears 
    grid.render(); 
} 

}

Ngoài ra, tôi có một vấn đề mà các yếu tố được thêm vào, nhưng tôi không thể nhìn thấy kết quả. Sau khi nguồn một số slickgrid nghiên cứu của tôi tìm thấy giải pháp này:

<div id="grid" class="grid-canvas" data-bind="slickGrid: { 
                 data: viewModel.items, 
                 columns: viewModel.columns, 
                 options: { 
                    enableColumnReorder: false, 
                    rowHeight: 20, 
                    enableAddRow: true, 
                    autoHeight: true 
                   } }"></div> 
<a href="#" class="btn-link" data-bind="click: viewModel.addItem">Add Item</a> 

Bởi vì bằng cách nào đó theo mặc định lưới viewport có 0px chiều cao :) Chỉ cần thêm một số tùy chọn trong ràng buộc.