Hướng dẫn Bắt đầu Nhanh Ember.js Tối thiểu Khả thi của Mike Grassotti
Hướng dẫn bắt đầu nhanh này sẽ đưa bạn từ 0 đến hơn 0 trong vài phút. Khi hoàn tất, bạn sẽ cảm thấy phần nào tin tưởng rằng ember.js thực sự hoạt động và hy vọng sẽ có đủ hứng thú để tìm hiểu thêm.
CẢNH BÁO: Đừng chỉ thử hướng dẫn này rồi nghĩ rằng ember-sucks vì "Tôi có thể viết hướng dẫn bắt đầu nhanh đó tốt hơn trong jQuery hoặc Fortran" hoặc bất cứ điều gì. Tôi không cố gắng bán cho bạn trên ember hay bất cứ thứ gì, hướng dẫn này không chỉ là một lời chào thế giới.
Bước 0 - Kiểm tra jsFiddle
jsFiddle này có tất cả mã từ câu trả lời này
Bước 1 - Bao gồm ember.js và các thư viện bắt buộc khác
Ember.js yêu cầu cả jQuery và Handlebars. Đảm bảo các thư viện đó được tải trước 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>
Bước 2 - Mô tả giao diện người dùng ứng dụng của bạn bằng một hoặc nhiều mẫu thanh điều khiển
Theo mặc định, ember sẽ thay thế nội dung trang html của bạn bằng cách sử dụng nội dung của một hoặc nhiều mẫu thanh điều khiển. Một ngày nào đó, các mẫu này sẽ nằm trong các tệp .hbs riêng biệt được tập hợp bởi các đĩa xích hoặc có thể là grunt.js. Hiện tại, chúng tôi sẽ giữ mọi thứ trong một tệp và sử dụng các thẻ script.
Đầu tiên, hãy thêm một applicationmẫu duy nhất :
<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>
Bước 3 - Khởi tạo ứng dụng ember của bạn
Chỉ cần thêm một khối tập lệnh khác App = Ember.Application.create({});để tải ember.js và khởi tạo ứng dụng của bạn.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Đó là tất cả những gì bạn cần để tạo một ứng dụng ember cơ bản, nhưng nó không thú vị lắm.
Bước 4: Thêm bộ điều khiển
Ember đánh giá từng mẫu ghi đông trong ngữ cảnh của bộ điều khiển. Vì vậy, applicationmẫu có một sự phù hợp ApplicationController. Ember tạo là tự động nếu bạn không xác định, nhưng ở đây hãy tùy chỉnh nó để thêm thuộc tính thông báo.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Bước 5: Xác định các tuyến + nhiều bộ điều khiển và mẫu hơn
Bộ định tuyến Ember giúp dễ dàng kết hợp các mẫu / bộ điều khiển vào một ứng dụng.
<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>
Để làm cho việc này hoạt động, chúng tôi sửa đổi mẫu ứng dụng của mình bằng cách thêm một {{outlet}}người trợ giúp. Bộ định tuyến Ember sẽ hiển thị mẫu phù hợp vào ổ cắm tùy thuộc vào lộ trình của người dùng. Chúng tôi cũng sẽ sử dụng trình {{linkTo}}trợ giúp để thêm liên kết điều hướng.
<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>
Làm xong!
Một ví dụ làm việc của ứng dụng này có sẵn ở đây .
Bạn có thể sử dụng jsFiddle này làm điểm khởi đầu cho các ứng dụng ember của riêng mình
Bước tiếp theo...
Để tham khảo, câu trả lời ban đầu của tôi:
Câu hỏi của tôi dành cho bất kỳ chuyên gia nào của Ember.js và chắc chắn là các tác giả hướng dẫn tương ứng: Khi nào tôi nên sử dụng các mẫu thiết kế từ một hướng dẫn này và khi nào từ hướng dẫn khác?
Hai hướng dẫn này đại diện cho các phương pháp hay nhất tại thời điểm chúng được viết. Chắc chắn rằng có điều gì đó có thể học được từ mỗi người, nhưng đáng buồn là cả hai đều bị lỗi thời vì ember.js đang di chuyển rất nhanh. Trong số hai, Trek's hiện tại hơn nhiều.
Những thành phần nào trong mỗi thành phần là sở thích cá nhân và những thành phần nào sẽ chứng tỏ là cần thiết khi ứng dụng của tôi trưởng thành? Nếu bạn đang phát triển một ứng dụng ember mới, tôi không khuyên bạn nên làm theo phương pháp Code Lab. Nó chỉ là quá lỗi thời để có thể hữu ích.
Trong thiết kế của Code Lab, Ember dường như gần với tồn tại hơn trong ứng dụng (mặc dù nó là 100% JS tùy chỉnh của anh ấy), trong khi ứng dụng của Trek dường như sống động hơn trong Ember.
Nhận xét của bạn rất thú vị. CodeLab đang tận dụng các thành phần ember cốt lõi và truy cập chúng từ phạm vi toàn cầu. Khi nó được viết (9 tháng trước), điều này khá phổ biến nhưng ngày nay phương pháp hay nhất để viết các ứng dụng ember gần với những gì Trek đang làm.
Điều đó nói rằng, ngay cả hướng dẫn của Trek cũng đang trở nên lỗi thời. Các thành phần được yêu cầu ApplicationViewvà ApplicationControllerhiện được tạo bởi chính khuôn khổ.
Cho đến nay, nguồn tài liệu mới nhất là bộ hướng dẫn được xuất bản tại http://emberjs.com/guides/
- chúng được viết từ đầu trong vài tuần qua và phản ánh phiên bản ember (trước khi phát hành) mới nhất.
Tôi cũng sẽ xem dự án wip của trek tại đây: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
CHỈNH SỬA :
@ sly7_7: Tôi cũng sẽ đưa ra một ví dụ khác, sử dụng ember-data https://github.com/dgeb/ember_data_example