dependentObservable

Question

के माध्यम से Knockoutjs साथ SlickGrid अपडेट कर रहा है मैं उदाहरण http://jsfiddle.net/rniemeyer/A9NrP/

मैं ग्रिड populating और जोड़ें बटन उदाहरण के अनुसार काम कर रहा है के आधार पर knockout.js साथ SlickGrid उपयोग कर रहा हूँ। मेरी समस्या यह है कि जब मैं अपने व्यूमोडेल की पंक्तियों को अद्यतन करता हूं तो ko.dependentObservable ko.bindingHandlers के 'अपडेट' सेक्शन को निकाल दिया जाता है लेकिन स्लिम ग्रिड परिवर्तन नहीं उठाता है।

एचटीएमएल कि बाध्यकारी परिभाषित करता है:

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

SlickGrid कोड (इसी उदाहरण के रूप में):

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(); 
    } 
} 

अपने मॉडल:

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)); 
}, 

}

कोड जो AJAX सी बनाते हैं सभी, और आग ko.bindingHandlers.slickGrid.update लेकिन slickgrid does not के परिवर्तन को लेने के लिए लगता है, ajax मान्य डेटा वापस करता है, और जब एक लिंक पर उपयोगकर्ता क्लिक निकाल दिया जाता है:

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

क्यों addItem करता है फ़ंक्शन काम लेकिन ko.bindingHandlers.slickGrid.update नहीं? अद्यतन फ़ंक्शन में मैं सही डेटा देख सकता हूं कि ग्रिड को बाध्य होना चाहिए। क्या ऐसा इसलिए है क्योंकि पंक्तियों में सभी डेटा propertys अधिलेखित है?

अद्यतन: मैंने grid.invalidate() का उपयोग करने का प्रयास किया है; लेकिन यह does not काम है और यह भी देखा है कि addItem समारोह बंद हो जाता है वर्किंग एक बार ko.dependentObservable

Answer 1

निष्पादित किया जाता है मैं सिर्फ एक ही मुद्दा था और समाधान मिल गया है, तो निम्न करने के लिए अपने अद्यतन कोड बदलने के लिए:

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(); 
    } 

वैसे, सेटडाटा में सही पैरामीटर इंगित करता है कि क्या आप ग्रिड को शीर्ष पर वापस स्क्रॉल करना चाहते हैं या नहीं।

Answer 2

मैंने स्क्रॉलबार बग को ठीक करने के लिए rniemeyer के बहुत उपयोगी jsfiddle को अद्यतन किया है। मूल में, 20 पंक्तियों को जोड़ने का प्रयास करें, फिर लंबवत स्क्रॉलबार का उपयोग करें, और आपको UI समस्या दिखाई देगी। मुद्दा यह है कि स्क्रोलपैन गलत आकार के दृश्य आकार की गणना करता है, इसलिए स्क्रॉलबार झटके।

यहां एक अद्यतन संस्करण।

संपादित करें: नॉकआउट और slickgrid तो अद्यतन किया गया है मैं बेला को नवीनीकृत किया है: संपादित करें: और फिर:

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

नोट निम्नलिखित:

grid.resizeCanvas(); 

Answer 3

मेरे मामले में मैं विभिन्न नियंत्रणों के लिए बाध्य एक और दृश्य मॉडल के साथ slickgrid और knockout का उपयोग करने के लिए आवश्यक है। मैंने उदाहरण के रूप में http://jsfiddle.net/hlascelles/5ddNM/ का उपयोग किया और वहां कुछ निश्चित चीजें हैं। http://jsfiddle.net/Schnapz/z4YLD/2/ का उपयोग करें या नीचे विवरण देखें।

ग्रिड, आइटम और दृश्य की घोषणा मॉडल आप उदाहरण में लिखे गए के रूप में छोड़ सकते हैं।

ko.applyBindings(); 

और addItem इस तरह दिखना चाहिए:: लेकिन, बंधन ViewModel ही (Pageload में इसे कहते वरना) सहित सभी मॉडलों के लिए आम होना चाहिए

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

क्योंकि का उपयोग कर 'इस' नहीं होगा यहाँ काम करो।

फिर, कस्टम बांधने की मशीन इस तरह दिखना चाहिए (एक और उदाहरण से टोकन कहीं):

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(); 
} 

}

इसके अलावा, मैं एक समस्या यह है कि तत्वों को जोड़ा गया था, लेकिन मैंने देखा नहीं कर सका परिणाम। कुछ शोध slickgrid के सूत्रों के बाद मैं इस समाधान पाया:

<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> 

क्योंकि किसी भी तरह डिफ़ॉल्ट ग्रिड व्यूपोर्ट द्वारा 0px ऊंचाई था :) बस बंधन के दौरान कुछ विकल्पों को जोड़ा।