माइक ग्रासोट्टी की न्यूनतम व्यवहार्य एम्बर.जस्ट क्विकस्टार्ट गाइड
यह क्विकस्टार्ट गाइड आपको कुछ मिनटों में शून्य से थोड़ा अधिक-से-शून्य तक प्राप्त करना चाहिए । जब किया जाता है, तो आपको कुछ आश्वस्त होना चाहिए कि वास्तव में काम करता है और उम्मीद है कि अधिक जानने के लिए पर्याप्त रुचि होगी।
चेतावनी: इस गाइड को केवल आजमाएँ नहीं, फिर सोचें कि एम्बर-चूसना "मैं उस तेज-गाइड को jQuery या फोरट्रान में बेहतर लिख सकता हूँ" या जो भी हो। मैं आपको अंगारे या किसी भी चीज पर बेचने की कोशिश नहीं कर रहा हूं, यह मार्गदर्शिका नमस्ते-दुनिया से थोड़ी अधिक है।
चरण 0 - jsFiddle बाहर की जाँच करें
इस jsFiddle के पास इस उत्तर के सभी कोड हैं
चरण 1 - ember.js और अन्य आवश्यक पुस्तकालयों को शामिल करें
Ember.js को jQuery और हैंडल दोनों की आवश्यकता होती है। सुनिश्चित करें कि उन पुस्तकालयों को ember.js से पहले लोड किया गया है:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
चरण 2 - एक या एक से अधिक हैंडलबार टेम्पलेट का उपयोग करके अपने एप्लिकेशन के उपयोगकर्ता इंटरफ़ेस का वर्णन करें
डिफ़ॉल्ट रूप से एम्बर एक या एक से अधिक हैंडलबार्स टेम्प्लेट की सामग्री का उपयोग करके आपके html पृष्ठ के शरीर को बदल देगा। किसी दिन ये टेम्प्लेट अलग-अलग होंगे। spbsets या शायद grunt.js द्वारा इकट्ठी की गई। अभी के लिए हम सब कुछ एक फाइल में रखेंगे और स्क्रिप्ट टैग का उपयोग करेंगे।
सबसे पहले, एक एकल applicationटेम्पलेट जोड़ें :
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>
चरण 3 - अपने एम्बर आवेदन को आरम्भ करें
बस App = Ember.Application.create({});ember.js को लोड करने और अपने एप्लिकेशन को इनिशियलाइज़ करने के साथ एक और स्क्रिप्ट ब्लॉक जोड़ें ।
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
बस आपको मूल एम्बर एप्लिकेशन बनाने की आवश्यकता है, लेकिन यह बहुत दिलचस्प नहीं है।
चरण 4: एक नियंत्रक जोड़ें
एम्बर नियंत्रक के संदर्भ में प्रत्येक हैंडलबार टेम्प्लेट का मूल्यांकन करता है। इसलिए applicationटेम्पलेट का मिलान होता है ApplicationController। यदि आप किसी को परिभाषित नहीं करते हैं, तो एम्बर बनाता है स्वचालित रूप से, लेकिन यहां एक संदेश संपत्ति जोड़ने के लिए इसे अनुकूलित करें।
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
चरण 5: मार्गों + अधिक नियंत्रकों और टेम्पलेट्स को परिभाषित करें
एम्बर राउटर किसी एप्लिकेशन में टेम्प्लेट / कंट्रोलर्स को संयोजित करना आसान बनाता है।
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>
इस काम को करने के लिए, हम एक {{outlet}}सहायक जोड़कर अपने एप्लिकेशन टेम्पलेट को संशोधित करते हैं । उपयोगकर्ता के मार्ग के आधार पर एम्बर राउटर उपयुक्त टेम्पलेट को आउटलेट में प्रस्तुत करेगा। हम {{linkTo}}नेविगेशन लिंक जोड़ने के लिए सहायक का भी उपयोग करेंगे ।
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>
किया हुआ!
इस एप्लिकेशन का एक कार्यशील उदाहरण यहां उपलब्ध है ।
आप इस jsField को अपने खुद के एम्बर ऐप्स के लिए शुरुआती बिंदु के रूप में उपयोग कर सकते हैं
अगला कदम...
- एम्बर गाइड पढ़ें
- हो सकता है कि Peepcode screencast खरीदें
- स्टैक ओवरफ्लो पर या एम्बर आईआरसी पर यहां प्रश्न पूछें
संदर्भ के लिए, मेरा मूल उत्तर:
मेरा प्रश्न किसी भी Ember.js विशेषज्ञ के लिए है, और निश्चित रूप से संबंधित ट्यूटोरियल लेखक: मुझे एक ट्यूटोरियल से डिजाइन पैटर्न का उपयोग कब करना चाहिए, और दूसरे से कब?
ये दो ट्यूटोरियल उस समय लिखे गए सर्वोत्तम प्रथाओं का प्रतिनिधित्व करते हैं। यह सुनिश्चित करने के लिए कि प्रत्येक से कुछ सीखा जा सकता है, दोनों दुख की बात है कि तारीख से बाहर हो जाते हैं क्योंकि ember.js बहुत तेज़ी से आगे बढ़ रहे हैं। दो में से, ट्रेक अधिक वर्तमान है।
प्रत्येक घटक व्यक्तिगत प्राथमिकताएं हैं, और मेरे ऐप के परिपक्व होने पर कौन से घटक आवश्यक साबित होंगे? यदि आप एक नया एम्बर एप्लिकेशन विकसित कर रहे हैं तो मैं कोड लैब दृष्टिकोण का पालन करने की सलाह नहीं दूंगा। यह उपयोगी होने के लिए बहुत पुराना है।
कोड लैब के डिजाइन में, एम्बर एप्लिकेशन के भीतर मौजूदा के करीब प्रतीत होता है (भले ही यह उसके कस्टम जेएस का 100% है), जबकि ट्रेक के आवेदन एम्बर के भीतर अधिक रहते हैं।
आपकी टिप्पणी धमाकेदार है कोडलैब कोर एम्बर घटकों का लाभ उठा रहा है और उन्हें वैश्विक दायरे से एक्सेस कर रहा है। जब यह (9 महीने पहले) लिखा गया था तो यह बहुत सामान्य था लेकिन आज एम्बर एप्लिकेशन लिखने के लिए सबसे अच्छा अभ्यास ट्रेक जो कर रहा था उसके बहुत करीब है।
उस ने कहा, यहां तक कि ट्रेक का ट्यूटोरियल पुराना हो रहा है। घटक जो आवश्यक थे ApplicationViewऔर ApplicationControllerअब ढांचे द्वारा ही उत्पन्न किए गए हैं।
अब तक का सबसे मौजूदा संसाधन http://emberjs.com/guides/ पर प्रकाशित गाइडों का सेट है
- वे पिछले कुछ हफ्तों में जमीन से लिखे गए हैं और एम्बर के नवीनतम (पूर्व-रिलीज़) संस्करण को दर्शाते हैं।
मैं यहां ट्रेक के वीआईपी प्रोजेक्ट को भी देखूंगा: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-convenience
संपादित करें :
@ sly7_7: मैं एम्बर-डेटा का उपयोग करके एक अन्य उदाहरण भी दूंगा, https://github.com/dgeb/ember_data_example