Mike Grassotti'nin Minimum Viable Ember.js Hızlı Başlangıç Kılavuzu
Bu hızlı başlangıç kılavuzu sizi birkaç dakika içinde sıfırdan biraz fazla sıfıra götürmelidir . İşiniz bittiğinde, ember.js'nin gerçekten işe yaradığından emin olmalısınız ve umarım daha fazlasını öğrenmek için yeterince ilgilenirsiniz.
UYARI: Sadece bu kılavuzu denemeyin, sonra ember-berbat olduğunu düşünmeyin çünkü "Bu hızlı başlangıç kılavuzunu jQuery veya Fortran'da daha iyi yazabilirim" veya her neyse. Seni köz falan satmaya çalışmıyorum, bu rehber bir merhaba dünyasından biraz daha fazlası.
Adım 0 - jsFiddle'a göz atın
Bu jsFiddle , bu yanıttaki tüm kodlara sahip
Adım 1 - ember.js ve diğer gerekli kitaplıkları ekleyin
Ember.js hem jQuery hem de Gidon gerektirir. Bu kitaplıkların ember.js'den önce yüklendiğinden 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>
Adım 2 - Bir veya daha fazla gidon şablonu kullanarak uygulamanızın kullanıcı arayüzünü tanımlayın
Kor varsayılan olarak html sayfanızın gövdesini bir veya daha fazla handlbars şablonunun içeriğini kullanarak değiştirir. Bir gün bu şablonlar, zincir dişlileri veya belki de grunt.js tarafından bir araya getirilen ayrı .hbs dosyalarında olacaktır. Şimdilik her şeyi tek bir dosyada tutacağız ve betik etiketleri kullanacağız.
Öncelikle tek bir applicationş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>
Adım 3 - ember uygulamanızı başlatın
App = Ember.Application.create({});Ember.js dosyasını yüklemek ve uygulamanızı başlatmak için başka bir komut dosyası bloğu ekleyin .
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Temel bir kor uygulaması oluşturmak için ihtiyacınız olan tek şey bu, ancak çok da ilginç değil.
4. Adım: Denetleyici ekleyin
Ember, her gidon şablonunu bir denetleyici bağlamında değerlendirir. Yani applicationşablonda bir eşleşme var ApplicationController. Bir tane tanımlamazsanız Ember otomatik olarak oluşturur, ancak burada bir mesaj özelliği eklemek için özelleştirelim.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Adım 5: Rotaları + daha fazla denetleyici ve şablonu tanımlayın
Ember yönlendirici, şablonları / denetleyicileri bir uygulamada birleştirmeyi kolaylaştırır.
<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>
Bunun çalışması için, bir {{outlet}}yardımcı ekleyerek uygulama şablonumuzu değiştiriyoruz . Ember yönlendirici, kullanıcının yoluna bağlı olarak çıkışa uygun şablonu oluşturacaktır. {{linkTo}}Yardımcıyı gezinme bağlantıları eklemek için de 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 uygulamanın çalışan bir örneğini burada bulabilirsiniz .
Bu jsFiddle'ı kendi ember uygulamalarınız için başlangıç noktası olarak kullanabilirsiniz.
Sonraki adımlar...
Referans için orijinal cevabım:
Sorum herhangi bir Ember.js uzmanı ve kesinlikle ilgili eğitim yazarları için: Bir öğreticideki tasarım modellerini ne zaman ve diğerinden ne zaman kullanmalıyım?
Bu iki eğitim, yazıldıkları andaki en iyi uygulamaları temsil etmektedir. Elbette her birinden öğrenilebilecek bir şey var, her ikisi de ne yazık ki güncelliğini yitirmeye mahkum çünkü ember.js çok hızlı hareket ediyor. İkisinden Trek çok daha güncel.
Her birinin hangi bileşenleri kişisel tercihlerdir ve uygulamam olgunlaştıkça hangi bileşenler önemli olacaktır? Yeni bir köz uygulaması geliştiriyorsanız, Code Lab yaklaşımını izlemenizi önermem. Faydalı olamayacak kadar güncel değil.
Code Lab'in tasarımında Ember, uygulama içinde var olmaya daha yakın görünüyor (özel JS'sinin% 100'ü olmasına rağmen), Trek'in uygulaması ise Ember'da daha çok yaşıyor gibi görünüyor.
Yorumunuz mükemmel. CodeLab, çekirdek ember bileşenlerinden yararlanıyor ve bunlara küresel kapsamdan erişiyor. Yazıldığında (9 ay önce) bu oldukça yaygındı ancak günümüzde kor uygulamaları yazmak için en iyi uygulama, Trek'in yaptığına çok daha yakındır.
Bununla birlikte, Trek'in öğreticisi bile güncelliğini yitiriyor. Gerekli olan ApplicationViewve ApplicationControllerartık çerçevenin kendisi tarafından üretilen bileşenler .
Açık
farkla en güncel kaynak, http://emberjs.com/guides/ adresinde yayınlanan kılavuzlar setidir - son birkaç hafta içinde sıfırdan yazılmıştır ve ember'ın en son (yayın öncesi) sürümünü yansıtmaktadır.
Ayrıca trek'in wip projesine buradan göz atabilirim: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
DÜZENLE :
@ sly7_7: Ember-data https://github.com/dgeb/ember_data_example kullanarak başka bir örnek de vereceğim