स्प्राउटकोर पार्ट वन का परिचय

हाल ही में, जावास्क्रिप्ट MVC फ्रेमवर्क पर कई लेख आए हैं। जाहिर है ऐसे उपकरणों की आवश्यकता है। मेरा ध्यान SproutCore नामक उत्पाद की ओर आकर्षित हुआ। रूसी में जानकारी की अल्प उपलब्धता की खोज करने के बाद, मैंने अपने लिए रूपरेखा की आधिकारिक वेबसाइट से कई मैनुअल का अनुवाद करने का निर्णय लिया। मैं उनमें से पहला समुदाय के साथ साझा करूंगा।

इस गाइड को पढ़ने के बाद, आप निम्न कार्य करने में सक्षम होंगे:

• आवेदन की उपस्थिति का वर्णन करने के लिए स्प्राउटकोर टेम्पलेट्स का उपयोग करें;
• एक दृश्य के भीतर घटनाओं को संभालना;
• मॉडल की स्थिति को बदलने के बाद दृश्य को अपडेट करने के लिए बाइंडिंग का उपयोग करें।

टोडो सूची ऐप बनाते समय आप यह सब सीखेंगे।

इस एप्लिकेशन का स्रोत कोड Github पर उपलब्ध है। एक पेंचकस भी है।

1 स्प्राउटकोर स्थापित करना

यह माना जाता है कि आपके पास पहले से ही SproutCore स्थापित है, अन्यथा आपको इसे स्थापित करने की आवश्यकता है।
आप आधिकारिक स्प्राउटकोर वेबसाइट से इंस्टॉलर को डाउनलोड कर सकते हैं, या आप रूबीगैम कमांड रत्न स्थापित स्प्राउटकोर का उपयोग करके इसे स्थापित कर सकते हैं।

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

मैंने RubyGems का उपयोग करके स्थापित किया, कोई समस्या नहीं थी।

2 एक नया अनुप्रयोग बनाना

सबसे पहले, हम कमांड के साथ HTML एप्लिकेशन जेनरेट करते हैं:

$ sc-init todos --template

यह उपयोगिता ऐप्स / टॉडोस डायरेक्टरी में कई फाइलें बनाएगी।

ऐप्स /
टॉड /
todos.js एक जावास्क्रिप्ट फ़ाइल है जो आपके मॉडल, दृश्य और नियंत्रकों को परिभाषित करती है।
संसाधन /
टेम्प्लेट / - में यहां एप्लिकेशन टेम्प्लेट हैं।
todos.handlebars - मुख्य अनुप्रयोग टेम्पलेट।
छवियाँ / - इसमें चित्र शामिल हैं।
शैलियों / - और यहाँ शैलियों रहे हैं।
todos.css अनुप्रयोग के लिए मुख्य स्टाइलशीट है।
परीक्षण /
बिल्डफाइल - एप्लिकेशन के निर्माण के लिए कमांड शामिल है। ज्यादातर मामलों में, आप डिफ़ॉल्ट फ़ाइल का उपयोग कर सकते हैं।
README - परियोजना का विवरण।

यदि आप फ़ाइल ऐप्स / टॉड / / todos.js खोलते हैं, तो हम निम्नलिखित देखेंगे

Todos = SC.Application.create(); SC.ready(function() { Todos.mainPane = SC.TemplatePane.append({ layerId: "todos", templateName: "todos" }); }); 

यह कोड एप्लिकेशन (इस मामले में, "टोडोस") के लिए एक नाम स्थान बनाता है, और एक नया पैनल जोड़ता है।
पैनल ईवेंट्स को डेलिगेट करने और आपके टेम्प्लेट्स को DOM में रखने के लिए जिम्मेदार है, लेकिन बाद में और भी बहुत कुछ।

यदि एप्लिकेशन जनरेशन के दौरान नाम में अपरकेस अक्षर होते हैं, उदाहरण के लिए ToDos, तो नामस्थान को ToDos कहा जाएगा,
और निर्देशिका नामों में अंडरस्कोर (उपरोक्त उदाहरण में, ऐप्स / to_dos) होंगे।

3 मॉडल की घोषणा

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

 Todos = SC.Application.create(); Todos.Todo = SC.Object.extend({ title: null, isDone: false }); SC.ready(function() { Todos.mainPane = SC.TemplatePane.append({ layerId: 'todos', templateName: 'todos' }); }); 

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

4 नियंत्रक का उपयोग करके एक मॉडल को नियंत्रित करना

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

एप्लिकेशन / todos / todos.js फ़ाइल के अंत में , जोड़ें:

 Todos.todoListController = SC.ArrayController.create({ //      . content: [] }); 

स्प्राउटकोर जैसे एमवीसी ढांचे में, नियंत्रक मॉडल (डेटा के साथ काम करने के लिए जिम्मेदार) और दृश्य (डेटा प्रदर्शित करने के लिए जिम्मेदार) के बीच एक पुल है।

अब हमारे पास डेटा के बिना एक नियंत्रक है, इसे एक नया कार्य बनाने के लिए एक विधि जोड़ें। ऐप्स / पिछले / todos.js फ़ाइल में पिछले कोड को अपडेट करें:

 Todos.todoListController = SC.ArrayController.create({ //      . content: [], //      ,     . createTodo: function(title) { var todo = Todos.Todo.create({ title: title }); this.pushObject(todo); } }); 

SC.ArrayController सरणी की सामग्री के लिए एक प्रॉक्सी के रूप में कार्य करता है। SproutCore सरणी के कंटेंट पर सीधे ArrayController के लिए किए गए सभी परिवर्तनों को लागू करेगा।

5 टेक्स्ट बॉक्स का उपयोग करके एक नया कार्य बनाएं।

इस उदाहरण के लिए एक CSS फ़ाइल तैयार की गई थी, जिसे यहाँ डाउनलोड किया जा सकता है और
इसे ऐप्स / टॉडोस / रिसोर्स / स्टाइलशीट / टॉडोस.एक्स पर स्थित एप्लिकेशन क्रिएटिविटी यूटिलिटी द्वारा उत्पन्न खाली फाइल से बदलें ।

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

स्प्राउटकोर उपयोगकर्ता इंटरफ़ेस पैटर्न का वर्णन करने के लिए हैंडलबार्स का उपयोग करता है, जिसे अधिक सुविधा के लिए थोड़ा विस्तारित किया गया है।

विचारों के साथ काम करना शुरू करने के लिए, संसाधन / टेम्पलेट / todos.handlebars फ़ाइल खोलें ।
इसमें निम्नलिखित शामिल हैं:

 <h1>Welcome to SproutCore!</h1> 

सामग्री को इसके साथ बदलें:

 <h1>Todos</h1> <input id="new-todo" type="text" placeholder="  ?" > 

हैंडलबार्स का उपयोग करने के बारे में अधिक जानकारी के लिए, यहां क्लिक करें । स्प्राउटकोर के साथ हैंडलबार्स का उपयोग करने के बारे में अधिक जानने के लिए, यहां पढ़ें।

अब हमारे पास मॉडल, नियंत्रक और दृश्य है, यह ब्राउज़र में एप्लिकेशन को खोलने और यह देखने का समय है कि यह कैसा दिखता है। विकास प्रक्रिया को सरल बनाने के लिए, एक sc- सर्वर उपयोगिता है। इस कमांड को उस निर्देशिका से निष्पादित किया जाना चाहिए जिसमें एप्लिकेशन स्थित है।
$ sc-server

Starting server at 0.0.0.0:4020 in debug mode
To quit sc-server, press Control-C
>> Thin web server (v1.2.1 codename Bat-Shit Crazy)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:4020, CTRL+C to stop

एक वेब ब्राउज़र खोलें और http: // localhost: 4020 / todos पर जाएं । अपनी रचना को सराहें। हमने यह सुनिश्चित करने के बाद कि एप्लिकेशन काम कर रहा है, स्प्राउटकोर को यह बताने का समय है कि टैग घटनाओं को कैसे संभालना है। जब उपयोगकर्ता कार्य के नाम में प्रवेश करेगा और Enter दबाएगा, हम एक नया कार्य बनाएंगे और इसे कार्य सरणी में जोड़ देंगे।

स्प्राउटकोर में, DOM ट्री को अपडेट करने और इवेंट्स को हैंडल करने के लिए एक दृश्य जिम्मेदार है। इसके अलावा, प्रदर्शन में सुधार और सार्वभौमिक क्रॉस-प्लेटफ़ॉर्म ईवेंट हैंडलिंग का समर्थन करने के लिए डोम में परिवर्तनों को बफर करना संभव है। जब भी प्रदर्शित करना आवश्यक है
गतिशील सामग्री, आपको दृश्य ऑब्जेक्ट का उपयोग करने की आवश्यकता है।

SC.ready फ़ंक्शन को कॉल करने से पहले एप्लिकेशन / todos / todos.js फ़ाइल में निम्न कोड जोड़ें:

 Todos.CreateTodoView = SC.TextField.extend({ insertNewline: function() { var value = this.get('value'); if (value) { Todos.todoListController.createTodo(value); this.set('value', ''); } } }); 

जब CreateTodoView में एक पाठ फ़ील्ड होता है, तो हम SC.TextField का एक उपवर्ग बनाते हैं, जो पाठ फ़ील्ड के लिए काम करने के लिए कई सुविधा प्रदान करता है। उदाहरण के लिए, आप संपत्ति के मूल्यों का उपयोग कर सकते हैं और उच्च-स्तरीय घटनाओं जैसे कि निवेशनलाइन से अनुरोधों का जवाब दे सकते हैं।
जब उपयोगकर्ता Enter दबाता है। अब जब हमने अपना दृष्टिकोण परिभाषित कर लिया है, तो हमें इसे टेम्पलेट में शामिल करना होगा।

फ़ाइल ऐप्स / todos / Resources / टेम्पलेट्स / todos.handlebars में परिवर्तन करें :

 <h1>Todos</h1> {{#view Todos.CreateTodoView}} <input id="new-todo" type="text" placeholder="  ?" /> {{/view}} 

#view एक हेल्पर हैंडलबार हेल्पर (सहायक या सहायक - जो भी आपको पसंद है) SC.TemplateView और HTML तत्वों को जोड़ता है। इसका मतलब है कि दृश्य में वर्णित व्यवहार (उदाहरण के लिए, घटना प्रसंस्करण) #view ब्लॉक के अंदर HTML तत्वों से जुड़ा होगा।

अब हमारे पास नए कार्य बनाने के लिए इंटरफ़ेस है, हम उन्हें प्रदर्शित करने के लिए एक इंटरफ़ेस बनाएंगे।
हम सूची को प्रदर्शित करने के लिए #collection block का उपयोग करेंगे। #collection SC.TemplateCollectionView का एक उदाहरण बनाएगा, जो प्रत्येक सूची आइटम को #collection block के अंदर HTML कोड के अनुसार प्रदर्शित करता है।

फ़ाइल कोड के अंत में निम्नलिखित कोड जोड़ें / todos / Resources / टेम्पलेट्स / todos.handlebars :

 {{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController"}} {{content.title}} {{/collection}} 

हमने todoListController की सामग्री पर एक संग्रह बंधन की घोषणा की।
अब एरे के प्रत्येक तत्व को {{content.title}} टेम्प्लेट के अनुसार प्रदर्शित किया जाएगा।

ध्यान दें कि बाध्यकारी बनाने के लिए, आपको एक संपत्ति घोषित करनी होगी जिसका नाम बंधन के साथ समाप्त होता है। हमारे मामले में, सामग्री संपत्ति Todos.todoListController के लिए बाध्य होगी और सामग्री संपत्ति के सभी परिवर्तनों से Todos.todoListController में परिवर्तन होगा।

हमारे एप्लिकेशन को देखने का शानदार समय http: // localhost: 4020 / todos आपके ब्राउज़र में। यह पहले जैसा ही दिखता है, लेकिन यदि आप टेक्स्ट बॉक्स में कार्य का नाम दर्ज करते हैं और Enter दबाते हैं, तो यह स्वचालित रूप से पाठ बॉक्स के नीचे सूची में जुड़ जाएगा।

स्प्राउटकोर में डेटा के साथ काम करने के लिए बाइंडिंग या बाइंडिंग प्राथमिक उपकरण है। वे डेटा और डिस्प्ले को सिंक्रनाइज़ करने के सभी गंदे काम करते हैं।

6 टास्क पूरा होने का निशान

हमारे पास कार्यों को जोड़ने की क्षमता है, लेकिन उनके पूरा होने को चिह्नित करने का कोई तरीका नहीं है। आइए इस सुविधा को जोड़ते हैं।

पहली चीज जो हम करेंगे, वह है कार्य सूची में प्रत्येक आइटम में एक चेकबॉक्स जोड़ना। जैसा कि पहले उल्लेख किया गया है, घटनाओं (उदाहरण के लिए, उपयोगकर्ता इनपुट) को संसाधित करने के लिए, HTML के उस भाग में दृश्य ऑब्जेक्ट को लागू करना आवश्यक है जिसमें इस प्रसंस्करण की आवश्यकता है। हमारे मामले में, हम एक चेकबॉक्स जोड़ते हैं और उपयोगकर्ता द्वारा अपनी स्थिति बदलने पर हर बार सूचनाएं प्राप्त करना चाहते हैं। याद रखें कि हम #view सहायक का उपयोग करके दृश्य और HTML सामग्री को लिंक कर सकते हैं। उसी समय, हम संदर्भित कर सकते हैं
HTML तत्वों से विशिष्ट ऑब्जेक्ट जो दृश्य सहायक का उपयोग करके डेटा प्रदर्शित करने के लिए जिम्मेदार हैं (# की कमी पर ध्यान दें)। उदाहरण के लिए, आप एक जटिल दृश्य बना सकते हैं
जिसका उपयोग कई बार किया जाएगा। इस मामले में, सभी टेम्प्लेट को अपडेट करने की आवश्यकता नहीं है जब किसी एक तत्व को अपडेट करने की आवश्यकता होती है।

पिछले कोड को एप्स / टेडोस / रिसोर्स / टेम्प्लेट / टॉडोस.हैंडलेबार फाइल में निम्नलिखित के साथ बदलें :

 {{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController"}} {{view Todos.MarkDoneView}} {{/collection}} 

अब हम Todos.MarkDoneView का वर्णन करेंगे जिसे हम टेम्पलेट में संदर्भित करेंगे। जब हमारे दृश्य में एक चेकबॉक्स होता है, तो हम SC.Checkbox का एक उपवर्ग घोषित करते हैं, जो दृश्य के मान और शीर्षक गुणों को पारित करता है।

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

SC.TemplateCollectionView सूची के प्रत्येक तत्व के लिए, एक बच्चा दृश्य बनाएं, जिसकी सामग्री संपत्ति में दृश्य ऑब्जेक्ट शामिल होगा। हमारे मामले में, यह प्रत्येक कार्य के लिए एक बच्चा दृश्य होगा, और सामग्री संपत्ति का मूल्य किसी विशिष्ट कार्य की सामग्री के लिए बाध्य होगा।

यह हमें चेकबॉक्स के गुणों और ऑब्जेक्ट के गुणों को आसानी से लिंक करने की अनुमति देगा। हमारे मामले में, हम वैल्यू प्रॉपर्टी (चेकबॉक्स) को आइडेंट प्रॉपर्टी (ऑब्जेक्ट का) और टाइटल प्रॉपर्टी (चेकबॉक्स) को टाइटल प्रॉपर्टी (ऑब्जेक्ट) के साथ जोड़ते हैं।

SC.ready फ़ंक्शन को कॉल करने से पहले एप्लिकेशन / todos / todos.js फ़ाइल में निम्न कोड जोड़ें:

 Todos.MarkDoneView = SC.Checkbox.extend({ titleBinding: '.parentView.content.title', valueBinding: '.parentView.content.isDone' }); 

कार्य सूची को एक विशिष्ट रूप देने के लिए, CSS फ़ाइल में सक्रिय और पूर्ण किए गए कार्यों के लिए अलग-अलग वर्ग हैं। आइए वर्ग संपत्ति (चेकबॉक्स) और isDone संपत्ति (ऑब्जेक्ट का) को बांधें।

निम्नलिखित के साथ फाइल एप्स / टाडोस / रिसोर्स / टेम्प्लेट्स / टॉडोस.हैंडलबार्स में टास्क लिस्ट प्रदर्शित करने के लिए कोड बदलें:

 {{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController" itemClassBinding="content.isDone"}} {{view Todos.MarkDoneView}} {{/collection}} 

प्रत्येक तत्व को एक-किया हुआ वर्ग प्राप्त होगा यदि संबंधित वस्तु का isDone गुण सत्य है। स्प्राउटकोर संपत्ति के नाम के आधार पर स्वचालित रूप से वर्ग नाम उत्पन्न करेगा।

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

अब ब्राउज़र में एप्लिकेशन को पुनरारंभ करें और कार्य को पूरा करने के रूप में चिह्नित करने का प्रयास करें, कार्य पाठ तुरंत पार हो जाएगा। जब सरणी के किसी भी तत्व की isDone संपत्ति बदल जाती है, तो संबंधित HTML तत्व उपस्थिति को बदल देगा। स्प्राउटकोर स्वचालित रूप से ऐसा करेगा।

7 और जानें

हम कार्यों को जोड़ सकते हैं और पूर्ण लोगों को चिह्नित कर सकते हैं। क्या हम अभी भी सूची से कोई जानकारी निकाल सकते हैं? आइए सूची के शीर्ष पर उत्कृष्ट कार्यों की संख्या प्रदर्शित करें।

एप्लिकेशन / टॉड / संसाधन / टेम्प्लेट / टेडोस.हैंडलबार्स खोलें और टोडोस.क्रिएटटोडो व्यू के बाद एक नया दृश्य तत्व जोड़ें।

 {{#view Todos.StatsView id="stats"}} {{displayRemaining}} {{/view}} 

अभिव्यक्ति {{displayRemaining}} स्वचालित रूप से DOM को अपडेट करेगी जब Todos.StatsView की डिस्प्लेमेयरिंग प्रॉपर्टी बदलती है।

SC.ready पर कॉल करने से पहले ऐप्स / todos / todos.js फ़ाइल में दृश्य का विवरण जोड़ें:

 Todos.StatsView = SC.TemplateView.extend({ remainingBinding: 'Todos.todoListController.remaining', displayRemaining: function() { var remaining = this.get('remaining'); return (remaining === 1 ? remaining +"   " : "   : "+remaining); }.property('remaining') }); 

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

पूरा नहीं किए गए कार्यों की वास्तविक संख्या प्राप्त करने के लिए, नियंत्रक के लिए संबंधित संपत्ति जोड़ें।

एप्लिकेशन / todos / todos.js फ़ाइल में, निम्नानुसार कोड अपडेट करें:

 Todos.todoListController = SC.ArrayController.create({ // ... remaining: function() { return this.filterProperty('isDone', false).get('length'); }.property('@each.isDone') }); 

इस मामले में, हम प्रत्येक पर निर्भरता कुंजी का उपयोग करते हैं । इस प्रकार, हम सरणी के किसी भी तत्व के isDone संपत्ति के परिवर्तन पर निर्भरता की घोषणा करते हैं। आइटम जोड़ते या हटाते समय प्रत्येक कुंजी के साथ गुणों को भी अपडेट किया जाता है। यह निर्भरता कुंजी घोषित करने के लिए आवश्यक है, क्योंकि स्प्राउटकोर बाइंडिंग अपडेट करने के लिए उनका उपयोग करता है। यहाँ यह कैसे काम करता है।



8 पूर्ण किए गए कार्यों को हटाना

आवेदन के साथ काम करते समय, आपको समय-समय पर पूर्ण कार्यों को हटाने की आवश्यकता होगी। जैसा कि आप समझते हैं, हम todoListController में परिवर्तन करना चाहते हैं ताकि स्प्राउटकोर स्वचालित रूप से इन परिवर्तनों को प्रदर्शित करे।
ऐसा करने के लिए, नियंत्रक के लिए clearCompletedTodos विधि जोड़ें।

एप्लिकेशन / todos / todos.js फ़ाइल में, निम्न के लिए कोड को अपडेट करें:

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

अब टेम्पलेट में बटन जोड़ें।
एप्लिकेशन / टॉड्स / संसाधन / टेम्‍प्‍लेट / टेडोस.हैंडलबार्स खोलें और StatsViews के लिए एक बटन जोड़ें:

 {{#view Todos.StatsView id="stats"}} {{#view SC.Button classBinding="isActive" target="Todos.todoListController" action="clearCompletedTodos"}}    {{/view}} {{displayRemaining}}. {{/view}} 

हमने SC.Button के एक उदाहरण को परिभाषित किया जो क्लिक करने पर ऑब्जेक्ट की विधि को कॉल करता है। हमारे मामले में, हमने Todos.todoListController ऑब्जेक्ट की स्पष्टComodectedTodos विधि को कॉल करने के लिए एक बटन बनाया। हमने यह भी घोषणा की कि जब आप एक बटन पर क्लिक करते हैं, तो आपको इसमें सक्रिय वर्ग जोड़ना होगा। यह आपको दबाए गए बटन के रूप को बदलने की अनुमति देगा।

अब एप्लिकेशन डाउनलोड करने, कार्यों को जोड़ने, उनमें से कई को पूरा करने के रूप में चिह्नित करें और उन्हें सूची से हटा दें। जैसा कि आप देख सकते हैं, सब कुछ काम करता है।

9 सभी को चिह्नित करें

मान लीजिए कि हम सभी कार्यों को पूरा करने का निर्णय लेते हैं। अब यह मुश्किल नहीं है, क्योंकि मुख्य काम पहले ही किया जा चुका है।

ToAlDistController को allAreDone विधि जोड़ें। निम्नलिखित में एप्लिकेशन / todos / todos.js फ़ाइल में कोड अपडेट करें:

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

स्प्राउटकोर में कई अनगिनत मददगार हैं। यदि प्रत्येक सरणी में तत्व सच के बराबर है, तो प्रत्येकProperty ('.Done', सत्य) सही है। आप मैनुअल पढ़कर और अधिक जान सकते हैं।

अगला, हम सभी कार्यों को पूरा करने के लिए और नियंत्रक की संपत्ति के साथ इसके मूल्य को जोड़ने के लिए एक ध्वज बनाएंगे। Todos.StatsView ऐड के बाद फ़ाइल ऐप्स / todos / Resources / टेम्पलेट्स / todos.handlebars में :

 {{view SC.Checkbox class="mark-all-done" title=" " valueBinding="Todos.todoListController.allAreDone"}} 

यदि अब आप एप्लिकेशन डाउनलोड करते हैं और सभी कार्यों को पूरा करने के रूप में चिह्नित करने का प्रयास करते हैं, तो आप देखेंगे कि "सभी को पूरा करें" चेकबॉक्स स्वचालित रूप से बदल गया है, लेकिन यह विपरीत दिशा में काम नहीं करता है। जब आप "सभी चलाते हैं" चेकबॉक्स पर क्लिक करते हैं, तो कार्य सूची में कोई परिवर्तन नहीं होता है। ध्वज को वैसा ही काम करने के लिए, जैसा कि हम toAlDistController में allAreDone विधि को फिर से लिखते हैं।

निम्नलिखित में एप्लिकेशन / todos / todos.js फ़ाइल में कोड अपडेट करें:

 Todos.todoListController = SC.ArrayController.create({ // ... allAreDone: function(key, value) { if (value !== undefined) { this.setEach('isDone', value); return value; } else { return this.get('length') && this.everyProperty('isDone', true); } }.property('@each.isDone') }); 

एक गणना की गई संपत्ति के लिए एक मूल्य निर्दिष्ट करने का प्रयास करते समय, संपत्ति फ़ंक्शन को कुंजी और मूल्य मापदंडों के साथ कहा जाता है। यह हम अपने उदाहरण में उपयोग करते हैं, जब हम ध्वज पर क्लिक करते हैं, तो SproutCore क्रमशः AllAreDone संपत्ति को बदलने की कोशिश करता है, हम इस कॉल को रोक सकते हैं।

अब आवेदन वही काम करता है जैसा हम चाहते थे।

मोबाइल के लिए 10 शैलियाँ

हमारे आवेदन को सभी प्रकार के आधुनिक मोबाइल उपकरणों पर पूरी तरह कार्यात्मक माना जा सकता है। विभिन्न स्क्रीन रिज़ॉल्यूशन के लिए इसे ऑप्टिमाइज़ करते हैं। यहां सीएसएस फ़ाइल डाउनलोड करें और के रूप में सहेजें
apps / todos / Resources / stylheets / todos_mobile.css । अब अपने मोबाइल डिवाइस का उपयोग करके एप्लिकेशन खोलें और आप केवल मोबाइल डिवाइस के लिए डिज़ाइन किए गए एप्लिकेशन को देखेंगे।

स्प्राउटकोर में महारत हासिल करने में सफलता।
मूल लेख ।