মাইক গ্রাসোটির ন্যূনতম व्यवहार्य এমবার.জেএস কুইকস্টার্ট গাইড
এই কুইকস্টার্ট গাইডটি আপনাকে কয়েক মিনিটের মধ্যে শূন্য থেকে সামান্য-শূন্যের তুলনায় আরও কিছুটা কমিয়ে আনতে হবে । হয়ে গেলে, আপনার কিছুটা আত্মবিশ্বাস বোধ করা উচিত যে এমবার.জেগুলি আসলে কাজ করে এবং আশা করি আরও কিছু জানতে আগ্রহী হবেন।
সতর্কতা: কেবল এই গাইডটির চেষ্টা করবেন না তারপরে ভাবেন যে অ্যাম্বার-সাকস "জিকুয়েরি বা ফোর্টরানে আরও ভাল স্ট্রাইক-গাইডটি আরও ভাল লিখতে পারলাম" বা যাই হোক না কেন। আমি আপনাকে অ্যাম্বার বা অন্য কোনও কিছুতে বিক্রি করার চেষ্টা করছি না, এই গাইডটি হ্যালো-ওয়ার্ল্ডের চেয়ে কিছুটা বেশি।
পদক্ষেপ 0 - জেএসফিডাল পরীক্ষা করে দেখুন
এই জেএসফিডেলের এই উত্তর থেকে সমস্ত কোড রয়েছে
পদক্ষেপ 1 - ember.js এবং অন্যান্য প্রয়োজনীয় লাইব্রেরি অন্তর্ভুক্ত করুন
Ember.js এর জন্য jQuery এবং হ্যান্ডলবার উভয়ই প্রয়োজন। নিশ্চিত হয়ে নিন যে এই লাইব্রেরিগুলি eber.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 - এক বা একাধিক হ্যান্ডেলবার টেম্পলেট ব্যবহার করে আপনার অ্যাপ্লিকেশনটির ইউজার ইন্টারফেস বর্ণনা করুন cribe
ডিফল্টরূপে অ্যাম্বার এক বা একাধিক হ্যান্ডলবার টেম্পলেটগুলির সামগ্রী ব্যবহার করে আপনার এইচটিএমএল পৃষ্ঠার মূল প্রতিস্থাপন করবে। কোনও দিন এই টেম্পলেটগুলি পৃথক .hbs ফাইলগুলিতে স্প্রোকেট বা সম্ভবত গ্রান্ট.জেএস দ্বারা একত্রিত হবে। আপাতত আমরা সমস্ত কিছু একটি ফাইলে রেখে দেব এবং স্ক্রিপ্ট ট্যাগগুলি ব্যবহার করব।
প্রথমে একটি একক যোগ করা যাক 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>
সম্পন্ন!
এই অ্যাপ্লিকেশনটির একটি কার্যকারী উদাহরণ এখানে উপলভ্য ।
আপনি এই jsFiddle আপনার নিজস্ব অ্যাম্বার অ্যাপ্লিকেশনগুলির সূচনা পয়েন্ট হিসাবে ব্যবহার করতে পারেন
পরবর্তী পদক্ষেপ...
রেফারেন্সের জন্য, আমার আসল উত্তর:
আমার প্রশ্নটি কোনও এম্বার.জেএস বিশেষজ্ঞ, এবং অবশ্যই সম্পর্কিত টিউটোরিয়াল লেখকদের জন্য: আমি কখন একটি টিউটোরিয়াল থেকে ডিজাইন নিদর্শন ব্যবহার করব এবং কখন অন্যটি থেকে থাকব?
এই দুটি টিউটোরিয়াল লেখার সময় সেরা অনুশীলনের প্রতিনিধিত্ব করে। নিশ্চিতভাবেই এখানে প্রত্যেকের কাছ থেকে কিছু শেখা যায়, দু'জনেই দুর্ভাগ্যক্রমে অতিক্রান্ত হয়ে যায় কারণ এমবার.জেগুলি খুব দ্রুত এগিয়ে চলেছে। দু'জনের মধ্যে ট্রেকস অনেক বেশি বর্তমান।
প্রত্যেকের কোন উপাদান ব্যক্তিগত পছন্দসমূহ এবং আমার অ্যাপ্লিকেশন পরিপক্ক হওয়ার সাথে কোন উপাদানগুলি প্রয়োজনীয় প্রমাণ করবে? আপনি যদি একটি নতুন অ্যাম্বার অ্যাপ্লিকেশন বিকাশ করে থাকেন তবে আমি কোড ল্যাব পদ্ধতির অনুসরণের পরামর্শ দেব না। এটি দরকারী হতে খুব পুরানো।
কোড ল্যাবের নকশায়, অ্যাম্বারটি অ্যাপ্লিকেশনটির মধ্যে বিদ্যমান বলে মনে হচ্ছে (যদিও এটি তার কাস্টম জেএসের 100%), অন্যদিকে ট্রেকের অ্যাপ্লিকেশনটি অ্যাম্বারের মধ্যে আরও বেশি বাস করে বলে মনে হচ্ছে।
আপনার মন্তব্যটি ধীরে ধীরে। কোডল্যাব মূল অম্বরের উপাদানগুলির সুবিধা নিয়েছে এবং তাদের বিশ্বব্যাপী সুযোগ থেকে অ্যাক্সেস করছে। যখন এটি লেখা হয়েছিল (9 মাস আগে) এটি বেশ সাধারণ ছিল তবে এম্বার অ্যাপ্লিকেশন লেখার জন্য আজ সেরা অনুশীলন ট্রেক যা করছিল তার থেকে অনেক বেশি কাছাকাছি।
এটি বলেছিল, এমনকি ট্রেকের টিউটোরিয়ালও পুরানো হয়ে যাচ্ছে। যে উপাদানগুলি প্রয়োজনীয় ছিল ApplicationViewএবং ApplicationControllerএখন কাঠামো নিজেই তৈরি করেছে।
এখন পর্যন্ত সর্বাধিক বর্তমান সংস্থানটি হল http://emberjs.com/guides/ এ প্রকাশিত গাইডের সেট is
- গত কয়েক সপ্তাহ ধরে এগুলি গ্রাউন্ড থেকে লেখা হয়েছে এবং এম্বরের সর্বশেষ (প্রাক-প্রকাশের) সংস্করণকে প্রতিফলিত করে।
আমি এখানে ট্রেকের ওয়াইপ প্রকল্পটিও দেখতে চাই: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
সম্পাদনা :
@ sly7_7: এম্বার-ডেটা ব্যবহার করে আমি অন্য একটি উদাহরণও দেব https://github.com/dgeb/ember_data_example