2012-04-01 13 views
12

से पर्यवेक्षण योग्य मैं एक ग्रिड स्थापित करने और JSON के माध्यम से अधिक रिकॉर्ड के साथ इसे अद्यतन करने का प्रयास कर रहा हूं। इस सरल उदाहरण में मैं आवश्यक कार्यक्षमता प्राप्त करने में सक्षम हूं लेकिन मैं केवल एक JSON रिकॉर्ड को अपडेट/पुश कर सकता हूं। मैं JSON के माध्यम से एकाधिक रिकॉर्ड जोड़ने में सक्षम होना चाहूंगा? मैं इसे कैसे प्राप्त कर सकता हूं? मुझे लगता है कि मुझे लूप के लिए कुछ प्रकार का निर्माण करना पड़ सकता है और प्रत्येक JSON परिणाम को देखने योग्य को धक्का दे सकता है लेकिन मुझे उम्मीद थी कि जेकॉन के माध्यम से नॉकआउट को अपडेट/पार्सिंग का बेहतर तरीका हो सकता है?अद्यतन Knockout.js JSON

यहाँ मैं अब तक क्या हासिल किया है की एक प्रति: http://jsfiddle.net/sparkhill/crSbt/

 function Users(user_id, password) { 
    this.user_id = ko.observable(); 
    this.password = ko.observable(); 
} 

var viewModel = { 

    users: ko.observableArray([]), 


    addUser: function() { 
     this.users.push({ 

      user_id: "", 
      password: "" 
     }); 
    }, 

    addJSON: function() { 


     //Works Fine 
     var JSONdataFromServer 
     ='{"user_id":"frances","password":"password"}'; 

     //More than one result - wont map - Would Ideally like to map lots of records at one time 
//var JSONdataFromServer ='{"user_id":"frances","password":"password"}, {"user_id":"frances","password":"password"}'; 

     var dataFromServer = ko.utils.parseJson(JSONdataFromServer); 


     this.users.push(dataFromServer); 

     //Tried 
     //this.users.push(JSON.parse(JSONdataFromServer)); 


    } 

}; 

viewModel.users(); 
ko.applyBindings(viewModel); 

    </script> 

अद्यतन इस काम करने के लिए लगता है, लेकिन मुझे आश्चर्य है कि एक अधिक कुशल तरीका है अगर उनकी?

addJSON: function() { 

     //Works Fine 
     var JSONdataFromServer 
     ='[{"user_id":"frances","password":"password"},{"user_id":"timmy","password":"password"}]'; 

     var results = JSON.parse(JSONdataFromServer); 

     var i = results.length; 

     for(var i = 0; i < results.length; i++){ 

      this.users.push(results[i]); 
     }; 

उत्तर

22

यहाँ 3 तरीके आप यह कर सकते हैं ... इस बेला में पाया: http://jsfiddle.net/johnpapa/nfnbD/

1) ko का प्रयोग करें .utils.arrayPushAll फ़ंक्शन 2) अपने तर्क का उपयोग करें 3) अवलोकन योग्य पर अपना स्वयं का फ़ंक्शन लिखें

विवरण ...

1) आप ko.utils.arrayPushAll समारोह का उपयोग करते हैं आप भी valueHasMutated कॉल करने के लिए क्योंकि सरणी प्रभावी रूप से खुद के साथ ओवरराइट हो जाता है की आवश्यकता होगी। अवलोकनता unles बंद नहीं करता है आप इसे बताते हैं कि यह बदल गया। यहाँ आप यह कैसे कर सकता है:

ko.utils.arrayPushAll(this.users(), dataFromServer); 
this.users.valueHasMutated(); 

2) दूसरा विकल्प, अपने खुद के पाश तर्क लिखने के लिए अनिवार्य रूप से इस तरह arrayPushAll समारोह के रूप में एक ही कोड का उपयोग कर रहा है।

for (var i = 0, j = dataFromServer.length; i < j; i++) 
this.users.push(dataFromServer[i]); 

3) observableArray पर अपने खुद के के एक समारोह बनाएं, इस तरह:

ko.observableArray.fn.pushAll = function(valuesToPush) { 
     var items = this; 
     for (var i = 0, j = valuesToPush.length; i < j; i++){ 
      items.push(valuesToPush[i]); 
     } 
     return items; 
}; 

हालांकि इस कोड से ऊपर हर बार एक आइटम जोड़ा सूचित कर देंगे। इसलिए उन्हें सभी जोड़ना बेहतर हो सकता है, फिर सूचित करें। यह अधिक कुशल होगा। इस तरह:

ko.observableArray.fn.pushAll = function(valuesToPush) { 
    var underlyingArray = this(); 
    this.valueWillMutate(); 
    ko.utils.arrayPushAll(underlyingArray, valuesToPush); 
    this.valueHasMutated(); 
    return this; 
}; 

तो यह इस तरह कहते हैं:

this.users.pushAll(dataFromServer); 
+0

की प्रक्रिया को कस्टमाइज़ कर सकते हैं, ध्यान रखें कि आपको अपने मॉडल का एक इंस्टेंस वैरिएबल बनाना पड़ सकता है यदि आप अपने पृष्ठ में कहीं भी अपने अवलोकन योग्य ऐरे को वास्तविक मॉडल के बाहर अपडेट करना चाहते हैं, उदाहरण के लिए: 'वर myModelInstance = नए ViewModel();' ' ko.utils.arrayPushAll (myModelInstance.users(), dataFromServer);' ' myModelInstance.users.pushall –

+1

यह अभी भी संस्करण 3.1 के साथ जाने का रास्ता नहीं है? – Homer

+0

मैं वही प्रश्न पूछता हूं जैसे होमर। संस्करण 3.1 के बाद से 'pushAll' पहले से ही KnockoutJs के मूल में है। – Samuel

3

आप mapping प्लगइन

उपयोग कर सकते हैं http://knockoutjs.com/documentation/plugins-mapping.html

+0

कैसे समस्या के साथ मानचित्रण प्लगइन मदद करता है? –

+0

अनुभाग "उन्नत उपयोग" देखें (जो लिंक किए गए आलेख में उपलब्ध है)। प्लगइन के साथ आप अपडेटिंग/सृजन –

1

मैं यह काफी एक पुराने पोस्ट को पता है लेकिन मैं इसे भर में आया था और सिर्फ सोचा था कि मैं एक और तरीका नॉकआउट में यह करने के लिए नहीं दिखाना पसंद करेंगे किसी भी भविष्य के आगंतुकों के लिए अपना खुद का pushAll बनाये बिना।

आप एक अवलोकन योग्य सरणी पर नॉकआउट में push.apply का उपयोग कर सकते हैं। यह आपको सर्वर से कई तत्वों को धक्का देने की अनुमति देगा और केवल एक अधिसूचना को ट्रिगर करेगा।

Example in JsFiddle

संपादित: further reading पढ़ने एक पाश में push का उपयोग कर के बजाय यह कौन जानना चाहता है क्यों push.apply उपयोग करने के लिए किसी के लिए भी

संबंधित मुद्दे