Panduan Memulai Cepat Ember.js Minimum yang Layak dari Mike Grassotti
Panduan memulai cepat ini akan membawa Anda dari nol ke sedikit-lebih-dari-nol dalam beberapa menit. Setelah selesai, Anda akan merasa yakin bahwa ember.js benar-benar berfungsi dan semoga cukup tertarik untuk mempelajari lebih lanjut.
PERINGATAN: Jangan hanya mencoba panduan ini lalu berpikir ember-sucks menyebabkan "Saya bisa menulis panduan memulai dengan lebih baik di jQuery atau Fortran" atau apa pun. Saya tidak mencoba menjual Anda dengan bara api atau apa pun, panduan ini lebih dari sekadar halo dunia.
Langkah 0 - Lihat jsFiddle
jsFiddle ini memiliki semua kode dari jawaban ini
Langkah 1 - Sertakan ember.js dan pustaka lain yang diperlukan
Ember.js membutuhkan jQuery dan Handlebars. Pastikan pustaka tersebut dimuat sebelum 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>
Langkah 2 - Jelaskan antarmuka pengguna aplikasi Anda menggunakan satu atau lebih template setang
Secara default, ember akan menggantikan badan halaman html Anda menggunakan konten dari satu atau lebih templat handlbars. Suatu hari nanti template ini akan berada dalam file .hbs terpisah yang dikumpulkan oleh sprocket atau mungkin grunt.js. Untuk saat ini kami akan menyimpan semuanya dalam satu file dan menggunakan tag skrip.
Pertama, mari tambahkan satu application
template:
<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>
Langkah 3 - Inisialisasi aplikasi ember Anda
Cukup tambahkan blok skrip lain dengan App = Ember.Application.create({});
untuk memuat ember.js dan menginisialisasi aplikasi Anda.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Hanya itu yang Anda butuhkan untuk membuat aplikasi ember dasar, tetapi itu tidak terlalu menarik.
Langkah 4: Tambahkan pengontrol
Ember mengevaluasi setiap template setang dalam konteks pengontrol. Jadi application
template memiliki kecocokan ApplicationController
. Pembuatan Ember secara otomatis jika Anda tidak menentukannya, tetapi di sini mari kita sesuaikan untuk menambahkan properti pesan.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Langkah 5: Tentukan rute + lebih banyak pengontrol dan templat
Router Ember memudahkan untuk menggabungkan template / pengontrol ke dalam aplikasi.
<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>
Untuk membuat ini bekerja, kami memodifikasi template aplikasi kami dengan menambahkan {{outlet}}
helper. Router ember akan membuat template yang sesuai ke outlet tergantung pada rute pengguna. Kami juga akan menggunakan {{linkTo}}
helper untuk menambahkan tautan navigasi.
<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>
Selesai!
Contoh kerja aplikasi ini tersedia di sini .
Anda dapat menggunakan jsFiddle ini sebagai titik awal untuk aplikasi ember Anda sendiri
Langkah selanjutnya...
- Baca Panduan Ember
- Mungkin membeli screencast Peepcode
- Ajukan pertanyaan di sini di Stack Overflow atau di ember IRC
Untuk referensi, jawaban asli saya:
Pertanyaan saya adalah untuk semua pakar Ember.js, dan tentunya untuk masing-masing penulis tutorial: Kapan saya harus menggunakan pola desain dari satu tutorial, dan kapan dari yang lain?
Kedua tutorial ini mewakili praktik terbaik pada saat ditulis. Yang pasti ada sesuatu yang bisa dipelajari dari masing-masing, sayangnya keduanya ditakdirkan ketinggalan zaman karena ember.js bergerak sangat cepat. Dari keduanya, arus Trek jauh lebih banyak.
Komponen apa dari masing-masing yang merupakan preferensi pribadi, dan komponen apa yang terbukti penting saat aplikasi saya matang? Jika Anda mengembangkan aplikasi ember baru, saya tidak akan merekomendasikan mengikuti pendekatan Code Lab. Itu terlalu kuno untuk digunakan.
Dalam desain Code Lab, Ember tampaknya lebih dekat dengan yang ada di dalam aplikasi (meskipun itu 100% dari JS kustomnya), sedangkan aplikasi Trek tampaknya lebih hidup dalam Ember.
Komentar Anda sangat menarik. CodeLab memanfaatkan komponen inti ember dan mengaksesnya dari lingkup global. Saat ditulis (9 bulan yang lalu), ini cukup umum, tetapi praktik terbaik saat ini untuk menulis aplikasi bara lebih dekat dengan apa yang dilakukan Trek.
Meskipun demikian, bahkan tutorial Trek menjadi ketinggalan zaman. Komponen yang diperlukan ApplicationView
dan ApplicationController
sekarang dibuat oleh kerangka itu sendiri.
Sumber daya terbaru sejauh ini adalah kumpulan panduan yang dipublikasikan di http://emberjs.com/guides/
- panduan tersebut telah ditulis dari awal selama beberapa minggu terakhir dan mencerminkan versi ember terbaru (pra-rilis).
Saya juga akan memeriksa proyek penghapusan trek di sini: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDIT :
@ sly7_7: Saya juga akan memberikan contoh lain, menggunakan ember-data https://github.com/dgeb/ember_data_example