Bagaimana merancang aplikasi Ember.js

Sulit untuk mengikuti evolusi Ember JS saat mendekati (dan tercapai!) Versi 1.0.0. Tutorial dan dokumentasi telah datang dan pergi, menyebabkan banyak kebingungan tentang praktik terbaik dan maksud dari pengembang asli.

Pertanyaan saya sebenarnya adalah: Apa praktik terbaik untuk Ember JS? Apakah ada tutorial yang diperbarui atau contoh kerja yang menunjukkan bagaimana Ember JS dimaksudkan untuk digunakan? Contoh kode akan sangat bagus!

Terima kasih untuk semuanya, terutama pengembang Ember JS!

Ada proyek penting yang harus dimanfaatkan oleh pengembang Ember.js baru dan lama:

Ember-CLI

Meskipun memang membutuhkan beberapa tingkat kenyamanan dengan baris perintah, Anda dapat menghasilkan proyek Ember modern dengan praktik terbaik yang direkomendasikan komunitas dalam hitungan detik.

Meskipun bermanfaat untuk menyiapkan proyek Ember.js dengan cara yang sulit seperti dalam jawaban Mike Grassotti, Anda tidak boleh melakukannya untuk kode produksi. Terutama ketika kami memiliki proyek yang kuat dan mudah digunakan seperti Ember-CLIuntuk menunjukkan kepada kami jalan bahagia yang disetujui Yehuda .

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 applicationtemplate:

<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 applicationtemplate 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 ApplicationViewdan ApplicationControllersekarang 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

Ada 30 menit screencast baru yang dibuat oleh @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

Saya akan sangat merekomendasikan menggunakan Yeoman dan generator bara yang menyertainya. Di luar kotak, Anda mendapatkan semua alat yang dibutuhkan untuk mengembangkan, menguji, dan menyiapkan aplikasi untuk produksi. Sebagai bonus tambahan, Anda akan dapat membagi template tampilan Anda menjadi beberapa file dan memulai dengan struktur direktori cerdas yang akan memfasilitasi Anda dalam membuat basis kode yang dapat dipelihara.

Saya telah menulis tutorial tentang cara mengaktifkan dan menjalankannya dalam waktu sekitar 5 menit. Cukup instal node.js dan ikuti di sini

The Fire Up Ember - Peepcode screencast layak untuk ditonton.

Ikuti juga tutorial gratis ini berjudul Let's Learn Ember dari Tuts + Premium. Ini gratis karena dari free coursesseri mereka . Kursus ini, sebagaimana orang-orang Tuts menyebutnya, dibagi menjadi empat belas bab yang mudah diikuti.

Saya harap ini membantu.

Salam,

Saya lebih suka pendekatan petani arang. Ini memberi Anda banyak hal di luar kotak termasuk:

• arsitektur folder yang bagus menggunakan pendekatan 'modul'.
• netral
• live reload
• mengecilkan
• jelek
• jshint

dan lainnya.

dan sangat mudah untuk mengaturnya, cukup jalankan yo charcoaluntuk membuat aplikasi lalu yo charcoal:module myModuletambahkan modul baru.

info lebih lanjut di sini: https://github.com/thomasboyt/charcoal

Saya baru saja membuat Starter Kit, jika Anda ingin menggunakan EmberJS terbaru dengan Ember-Data, dengan mesin template Emblem. Semua dibungkus dengan Middleman, sehingga Anda dapat mengembangkan dengan CoffeeScript. Semua yang ada di GitHub saya: http://goo.gl/a7kz6y

Meskipun Flame di Ember.js yang sudah ketinggalan zaman masih merupakan tutorial yang bagus untuk seseorang yang melihat ember untuk pertama kalinya.

Saya telah mulai membuat serangkaian video yang dimulai dari sebelum Ember dan mengembangkan penggunaan Ember dalam kemarahan dalam kasus penggunaan serius untuk hal-hal dunia nyata.

Jika Anda tertarik untuk melihat ini populer (saya sangat senang akhirnya mempublikasikannya jika ada minat) Anda pasti harus membuka pos yang saya buat dan tekan "suka" (atau cukup beri komentar di sini, Saya kira):

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

Saya sangat ingin membuatnya untuk membantu komunitas berkembang, tetapi juga untuk membantu orang belajar bagaimana membangun situs web standar dengan cara yang mudah.