स्प्राउटकोर भाग दो का परिचय

स्प्राउटकोर ट्यूटोरियल के पहले भाग में एक साधारण एप्लिकेशन बनाने की बात की गई थी।
यह अपने ज्ञान को गहरा करने और स्प्राउटकोर में मॉडल के साथ सौदा करने का समय है।

इस मैनुअल को पढ़ने के बाद, आप निम्न कार्य कर सकेंगे:

• SC.Record का उपयोग करके मॉडल का वर्णन करें।
• SC.Store के साथ मॉडल प्रबंधित करें।
• प्रारंभिक डेटा को स्टोरेज में लोड करें।
• SC.Query का उपयोग करके संग्रहण क्वेरी भेजें।

1 आवेदन तैयार करना

इस ट्यूटोरियल के पहले भाग में बताया गया है कि एक साधारण टोडो-लिस्ट एप्लिकेशन का निर्माण कैसे करें।
अब आप जानते हैं कि मॉडल, विचार और नियंत्रक का वर्णन कैसे करें, और बाइंडिंग का उपयोग करके उनकी बातचीत को कैसे परिभाषित करें।
हालाँकि, हमारे पास पेज अपडेट के बीच जानकारी संग्रहीत करने की क्षमता नहीं थी।

इसे लागू करने का एक तरीका अपने रिकॉर्ड को प्रबंधित करने के लिए स्प्राउटकोर के डेटा वेयरहाउस का उपयोग करना है।
SC.Store उदाहरण रिकॉर्ड के जीवन चक्र के प्रबंधन के लिए जिम्मेदार है।
SC.Store सर्वर से डाउनलोड किए गए डेटा को संसाधित करने और सर्वर पर वापस भेजने के लिए तैयार करने के लिए SC.DataSource का उपयोग करता है।

यदि आपके पास अभी भी इस गाइड के पहले भाग से आवेदन है, तो इसका उपयोग करें।
यदि नहीं, तो आप इसे GitHub से डाउनलोड कर सकते हैं।

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

config :all, :required => ["sproutcore/core_foundation", "sproutcore/datastore"], :theme => "sproutcore/empty_theme" 

2 मॉडल परिभाषा

अंतिम पाठ में, हमने मॉडल को SC.Object के उपवर्ग के रूप में परिभाषित किया, SC.Record का उपयोग करके इसे फिर से परिभाषित किया।
एप्लिकेशन / todos / todos.js फ़ाइल में कोड बदलें:

 Todos.Todo = SC.Record.extend({ title: SC.Record.attr(String), isDone: SC.Record.attr(Boolean, { defaultValue: NO }) }); 

अब हम मॉडल के आधार वर्ग के रूप में SC.Record का उपयोग करते हैं। हमने मॉडल विशेषताओं और उनके प्रकारों को भी परिभाषित किया है।
शीर्षक अब हमेशा एक स्ट्रिंग में बदल जाता है, और एक बूलियन चर के लिए है। इसके अलावा अब झूठी करने के लिए चूक,
जब तक अन्यथा निर्दिष्ट न हो।

3 स्थैतिक स्रोत डेटासेट बनाना

बैकएंड सर्वर से कनेक्ट किए बिना विकास शुरू करने का सबसे आसान तरीका स्रोत डेटा के स्थिर सेट का उपयोग करना है।
एक स्थिर संग्रह डेटा हैश की एक सरणी है जो प्रत्येक रिकॉर्ड का प्रतिनिधित्व करता है।
आइए, एक ऐसा सेट बनाते हैं, इसके लिए हम मॉडल कोड के बाद एप्लिकेशन / todos / todos.js फ़ाइल में निम्न कोड जोड़ते हैं:

 Todos.Todo.FIXTURES = [ { "guid": "todo-1", "title": "Build my first SproutCore app", "isDone": false }, { "guid": "todo-2", "title": "Build a really awesome SproutCore app", "isDone": false }, { "guid": "todo-3", "title": "Next, the world!", "isDone": false } ]; 

अब हमारे पास एक मॉडल और प्रारंभिक डेटा है, लेकिन यदि आप एप्लिकेशन चलाते हैं, तो कोई भी बदलाव दिखाई नहीं देता है।
तथ्य यह है कि SC.Store डेटा लोड करने के लिए जिम्मेदार है। नियंत्रक के लिए कोड जोड़ें जो हमारे आवेदन के लिए डेटा वेयरहाउस बनाता है।
एप्लिकेशन / todos / todos.js फ़ाइल में, निम्नलिखित लिखें:

 //         Todos = SC.Application.create({ store: SC.Store.create().from(SC.Record.fixtures) }); 

हमने एप्लिकेशन के लिए एक डेटा वेयरहाउस बनाया है। जब हम स्थैतिक स्रोत डेटा का उपयोग करते हैं, लेकिन तब यह एक तर्क के रूप में संभव होगा
से () फ़ंक्शन वास्तविक डेटा स्रोत को इंगित करते हैं।

आइए देखें कि हमारा आवेदन कैसे काम करता है। Sc-server कमांड चलाएं और ब्राउज़र में http: // localhost: 4020 / todos खोलें।
अब हमारे ब्राउज़र के जावास्क्रिप्ट कंसोल में हम निम्नलिखित कमांड लिखेंगे:

 records = Todos.store.find(Todos.Todo) records.objectAt(0).get('title') 

हमें इसका परिणाम मिलता है:

 // => "Build my first SproutCore app" 

हमने बस अपनी रिपॉजिटरी की खोज () विधि को कहा, जो SC.RecordArray वर्ग के उदाहरण के रूप में सभी रिकॉर्ड लौटाता है।
यदि आप एक नया रिकॉर्ड बनाते हैं, तो यह स्वचालित रूप से रिपॉजिटरी में जुड़ जाएगा, और यह भी जब रिकॉर्ड नष्ट हो जाता है, तो यह रिपॉजिटरी से गायब हो जाएगा।

4 नियंत्रक और भंडारण बंडल

अब हम अपने एप्लिकेशन के कंट्रोलर में स्टोरेज का उपयोग कर सकते हैं। ऐसा करने के लिए, Todos.todoListController ऑब्जेक्ट की सामग्री गुण सेट करें
स्टोर के फंक्शन () फ़ंक्शन द्वारा लौटाया गया मान। यह SC.ready () फ़ंक्शन के कॉलबैक में किया जा सकता है।

एप्लिकेशन / todos / todos.js फ़ाइल में कोड को निम्न में बदलें:

 SC.ready(function() { Todos.mainPane = SC.TemplatePane.append({ layerId: 'todos', templateName: 'todos' }); var todos = Todos.store.find(Todos.Todo); Todos.todoListController.set('content', todos); }); 

यदि हम अपने एप्लिकेशन के पेज को रिफ्रेश करते हैं, तो यह स्पष्ट है कि हमने रिपॉजिटरी में जो प्रारंभिक डेटा अपलोड किया था, वह प्रदर्शित है।
इसके बाद, हम एप्लिकेशन / todos / todos.js फ़ाइल में नए कार्यों को निम्न करने के लिए फ़ंक्शन को फिर से लिखते हैं:

 createTodo: function(title) { Todos.store.createRecord(Todos.Todo, { title: title }); }, 

और अंत में, टास्क डिलीट फंक्शन को ऐप्स / टॉड / / डॉस.जस फाइल में बदलें:

 Todos.todoListController = SC.ArrayController.create({ // ... clearCompletedTodos: function(){ this.filterProperty('isDone', true).forEach( function(item) { item.destroy(); }); }, // ... )}; 

अब हमारा एप्लिकेशन पूरी तरह कार्यात्मक है और अपने काम के लिए डेटा वेयरहाउस का उपयोग करता है।
रिपॉजिटरी JSON मैसेजिंग के माध्यम से बैकएंड सर्वर से बिना किसी समस्या के कनेक्ट होती है।

मूल लेख