Ember JS onun yaklaştı (ve ulaştı!) olarak evrimi takip etmek zor oldu sürüm 1.0.0. Eğitim ve Dokümantasyon gelip, kafa karışıklığı için en iyi uygulamaları bir sürü ve ilk geliştiren niyet giden gitti.

Ember JS için en iyi uygulamalar nelerdir? benim sorum tam olarak şu: Güncelleştirilmiş herhangi bir öğreticiler veya çalışma örnekleri nasıl Ember kullanılmak üzere tasarlanmıştır gösteren var mı? Kod örnekleri, harika olurdu!

Herkese teşekkürler, özellikle Ember JS geliştiriciler!

Mike Grassotti Minimum Uygulanabilir Ember.js Hızlı başlangıç Rehberi

Bu hızlı başlangıç rehberi almanız gerekirbirazcık daha-sıfıra sıfırbir kaç dakika sonra. Bittiğinde, ember.js aslında çalışır ve umarım daha fazla bilgi almak yeterli olacaktır oldukça emin hissetmeniz gerekir.

UYARI: Bu kılavuzu daha sonra sanırım ember-berbat neden denemiyorsun "bir WordPress kullanmak veya Fortran Hızlı Başlangıç Kılavuzu daha iyisini yazabilirim" ya da her neyse. Ember seni ikna etmeye çalışmıyorum ya da bir şey, bu kılavuzu bir Merhaba Dünya biraz daha fazla.

0 - jsFiddle Kontrol dışarı adım

this jsFiddle bu cevap tüm kod vardır

1 - ember.js ve diğer gerekli kütüphaneleri İçerir adım

Ember.js hem jQuery ve Gidon gerektirir. Bu kitaplıklar ember.js daha önce yüklü olduğundan emin olun

<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 - uygulamanızın kullanıcı arayüzü Tanımlamak için bir veya daha fazla gidon şablonları kullanarak adım

Varsayılan olarak ember html sayfası bir veya daha fazla handlbars şablonları içeriği kullanarak vücut yerini alacak. Bir gün bu şablonlar ayrı olacak .hbs dosyaları dişlisi ya da belki grunt.js tarafından toplandı. Şimdi tek bir dosya için her şeyi tutmak ve komut dosyası etiketlerini kullanacağız.

İlk olarak, *7.* tek bir şablon ekleyelim:

<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 - Başlat ember uygulama adım

Sadece yük ember.js App = Ember.Application.create({}); başka bir script bloğu eklemek uygulama başlatılamadı.

<script type='text/javascript'>
  App = Ember.Application.create({});
</script>

Temel ember uygulaması oluşturmak için ihtiyacınız olan her şey var, ama çok ilginç değil.

Adım 4: bir denetleyicisi Ekleyin

Ember gidon denetleyicisi bağlamında şablonları her değerlendirir. application bu şablon 12* *bir eşleştirme vardır. Ember eğer bir tanımlama, ama burada bir mesaj özelliği eklemek için özelleştirmek izin yok eğer doğru değilse otomatik olarak oluşturur.

<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});
</script>

Adım 5: yolları daha fazla denetleyicileri ve şablonlar Tanımlayın

Ember yönlendirici kolay bir uygulama içine şablonları/denetleyicileri birleştirmek için yapar.

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

Bu işi yapmak için, biz {{outlet}} bir yardımcı ekleyerek bizim uygulama şablonu değiştirin. Ember yönlendirici prize uygun bir şablon kullanıcının rotaya bağlı olarak işlerler. Ayrıca {{linkTo}} yardımcı gezinme bağlantıları eklemek için kullanacağız.

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

Bitti!

Bu uygulama, bir çalışma örnek here mevcuttur.

Kendi ember uygulamalar için bir başlangıç noktası olarak this jsFiddle kullanabilirsiniz

Sonraki Adımlar...

• Ember Guides okuyun
• Belki de satın Peepcode bakabilirim
• Sorular burada ember IRC Yığın Taşması ya da sor

Başvuru için, benim orijinal cevap:

Benim sorum herhangi bir ember.js uzman ve kesinlikle ilgili öğretici yazarlar: ne Zaman bir öğretici tasarım desenleri kullanmak, ve ne zaman kullanmalıyım?

Bu iki öğreticiler en iyi yazılmış zamanda uygulamaları temsil eder. Her öğrenilebilir bir şey var kesin, her ikisi de ne yazık ki ember.js çok hızlı hareket ediyor çünkü güncel olmaya mahkumdur. İki, Trek çok daha geçerli.

Ne bileşenlerinin bileşenleri uygulamam olgunlaştıkça önemli ispat edecektir ne kişisel tercihleri, ve? Eğer ember yeni bir uygulama geliştiriyorsanız Kodu Laboratuar yaklaşımı aşağıdaki tavsiye etmem. Çok out-of-tarih faydalı olabilir.

Kod Lab tasarım, Ember Trek uygulama daha Kor içinde yaşamak gibi görünüyor, ancak uygulama içinde özel onun JS 0 olmasına rağmen) mevcut daha yakın gibi görünüyor.

Yorum-vur. CodeLab çekirdek ember bileşenleri yararlanarak ve genel kapsama alınan bilgiye yapıyor. (9 ay önce) ne zaman yazıldı bu oldukça yaygındı ama ember uygulamaları yazmak için bugün en iyi uygulama Trek ne yaptığını çok daha yakın.

Bu Trek bile öğretici out-of-tarih haline geliyor " dedi. ApplicationView ApplicationController gerekli olan bileşenleri şimdi çerçevenin kendisi tarafından oluşturulur.

En geçerli kaynak kılavuzları http://emberjs.com/guides/yayınlanan kümesidir - son birkaç hafta içinde sıfırdan yazılmış olabilir, ve ember (pre-release) son sürümünü yansıtır.

Ayrıca trek yarı mamul proje burada bir kontrol etmek istiyorum: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

EDİT:

@sly7_7 : ayrıca başka bir örnek, ember-veri https://github.com/dgeb/ember_data_example kullanarak verirdim