Cổng thông tin bảo mật. Tạo một thành phần giao diện người dùng. Tạo các thành phần mô-đun

Khó học. Mặc dù thậm chí không phải vậy. Các khái niệm của Ember.js rất khó học và hiểu. Đối với tôi, có vẻ như bất kỳ khóa đào tạo nào của Ember.js đều nên bắt đầu bằng những từ này.

Tôi là nhà phát triển làm việc với Ruby on Rails (trước đây tôi đã lập trình bằng .NET và Python). Tôi khá khó hiểu được điều kỳ diệu đã khiến Ember.js hoạt động. Đôi khi tôi nói chuyện với những nhà phát triển mới vào nghề khác, những người đã (hoặc đang cố gắng đi theo) con đường Ember.js - tất cả các vấn đề của họ đều bắt đầu vì họ không hiểu cách thức hoạt động của khung này.

Vâng, một mặt có tài liệu chính thức mô tả chi tiết tất cả các khía cạnh của khuôn khổ này. Nhưng nó thiếu khái niệm; đối với một nhà phát triển mới vào nghề, đây chỉ là những mảnh thông tin nằm rải rác ngẫu nhiên. Ví dụ: từ tài liệu, bạn có thể biết rằng chúng tôi có bộ điều khiển, mô hình và chế độ xem trong kho vũ khí của mình (bộ điều khiển, mô hình, chế độ xem). Nhưng để tìm ra trách nhiệm của họ và cách họ làm việc, một nhà phát triển mới vào nghề được yêu cầu bước lên cào vài chục lần. Ngoài ra, ngoài bộ điều khiển, mô hình và chế độ xem, Ember.js còn cung cấp cho chúng ta cả một nhóm đối tượng đa dạng như thành phần, mẫu, bộ định tuyến và đường dẫn (thành phần, mẫu, bộ định tuyến, tuyến đường).

Nhưng điều đầu tiên trước tiên. Hãy bắt đầu đào tạo Ember.js của chúng ta bằng cách nhớ rằng nó không phải là khung MVC (model-view-controller); quên nó đi. Có, Ember.js có bộ điều khiển, mô hình và chế độ xem mẫu, nhưng đó là điểm tương đồng của nó với các khung MVC. Ember.js là một framework để viết các ứng dụng chạy trên trình duyệt của người dùng.

Hãy nhìn vào sơ đồ sau, nó mô tả chi tiết vòng đời yêu cầu ứng dụng tiêu chuẩnđược viết bằng Ember.js:

Các trạng thái ứng dụng của bạn được mô tả bằng địa chỉ bạn nhập vào thanh địa chỉ của trình duyệt. Bằng cách sử dụng một địa chỉ, bạn có thể lưu trạng thái ứng dụng của mình hoặc thậm chí chia sẻ trạng thái với những người dùng khác, chẳng hạn như bằng cách gửi cho đồng nghiệp một liên kết tới nhiệm vụ cụ thể trong trình theo dõi lỗi của bạn (ứng dụng hiển thị sự cố - đây là trạng thái của nó).

Vì vậy, hãy tưởng tượng rằng một ứng dụng được viết bằng Ember.js nhận được thông tin có địa chỉ thanh địa chỉ nó đã được thay đổi. Bộ định tuyến chặn thông tin này và cố gắng tìm ra những việc cần làm tiếp theo.

UFO (lạc đề trữ tình nhỏ): Ember.js hoạt động dựa trên hai nguyên tắc. Các quy tắc nằm trên các cấu hình (quy ước về cấu hình) và nếu Ember.js không tìm thấy đối tượng mong đợi thì nó sẽ tự tạo đối tượng dựa trên nó Quy tắc nội bộ. Điều đáng chú ý ở đây là cách hoạt động của trình tạo mã Ember.js. Có thể bạn đã quen với các trình tạo trong các khung công tác khác: chúng tạo một tệp có mã và lưu nó vào đĩa của bạn. Không giống như các khung công tác khác, trình tạo mã trong Ember.js chỉ tạo một đối tượng khi nó cần và giữ nó trong bộ nhớ. Khi một đối tượng không còn cần thiết nữa, Ember.js sẽ phá hủy nó - nguyên tắc này giúp bạn thoát khỏi sự hỗ trợ nguyên mẫu không cần thiết.

Tiếp tục đi. Giả sử người dùng yêu cầu đường dẫn /posts. Dựa trên yêu cầu này, bộ định tuyến sẽ cố gắng tìm đối tượng tiếp theo trong chuỗi theo tên - đường dẫn của nó. Như bạn có thể đã đoán, Ember.js sẽ tìm kiếm một đối tượng thuộc loại Route có tên là PostRoute. Đường dẫn trong Ember.js chịu trách nhiệm cung cấp mô hình cho bộ điều khiển.

Ember.js sẽ tìm kiếm một mô hình có tên PostModel. Mô hình mô tả cấu trúc dữ liệu được lưu trữ trong bộ lưu trữ của bạn và logic nghiệp vụ của các đối tượng. Bạn có thể coi mô hình như một lớp mà từ đó Ember.js tạo các đối tượng chứa dữ liệu. Kho dữ liệu chỉ là một lớp kỹ thuật trừu tượng nằm giữa mô hình và máy chủ của bạn. Bộ lưu trữ lưu trữ dữ liệu sau khi Ember.js lấy dữ liệu từ máy chủ.

Sau khi đường dẫn lấy dữ liệu, nó sẽ đưa nó đến bộ điều khiển. Bộ điều khiển trong trong trường hợp này sẽ được gọi là PostController. Điều đáng chú ý là không có kết nối trực tiếp giữa bộ điều khiển và mô hình; về nguyên tắc, họ không biết về nhau và bộ điều khiển không quan tâm bạn đưa ra mô hình nào. Bộ điều khiển chỉ là một công cụ trang trí dữ liệu - nó xử lý dữ liệu trước khi đưa cho người dùng.

Sau đó, Ember.js lấy dữ liệu đã xử lý từ bộ điều khiển và đưa vào mẫu. Nhưng có một đối tượng khác nằm giữa bộ điều khiển và mẫu - khung nhìn. Đó là chế độ xem, trong trường hợp của chúng tôi sẽ được gọi là PostView, cho Ember.js biết mẫu nào sẽ được sử dụng cho của yêu cầu này. Theo quy định, Ember.js sẽ sử dụng một mẫu có tên là bài viết.

Phản hồi Người dùng có thể tương tác với ứng dụng của chúng tôi (nút chọc, kéo các phần tử và gây rối với nhà phát triển theo những cách khác mà người dùng có sẵn). Ember.js phân biệt giữa hai loại tương tác của người dùng với ứng dụng. Đầu tiên là cái gọi là. sự kiện trình duyệt gốc - nhấp, kéo, thả, mouseEnter, mouserLeave, v.v. Cách thứ hai là các sự kiện có tên. Loại sự kiện thứ hai về cơ bản được kích hoạt bằng cách nhấp chuột vào phần tử mà sự kiện đã cho được xác định.

Vì vậy, sự khác biệt là gì, bạn yêu cầu? Hoặc bạn muốn hỏi. Loại sự kiện đầu tiên được xử lý độc quyền bởi chế độ xem; Ember.js không quan tâm người dùng nhấp vào nút nào, điều quan trọng nhất là nhấp chuột đó đã xảy ra. Loại thứ hai chỉ được kích hoạt sau khi một phần tử cụ thể được nhấp vào và được bộ điều khiển xử lý. Nếu bộ điều khiển không thể xử lý sự kiện, Ember.js sẽ cố gắng xử lý sự kiện trên Route Object trước khi báo lỗi.

Cấu trúc mẫu Mọi thứ bắt đầu trở nên khó hiểu hơn khi người mới biết rằng các mẫu Ember.js có thể được lồng với các đối tượng khác, do đó sẽ kích hoạt lại toàn bộ chu trình. Thực sự không có gì sai với điều đó.

TRÊN khoảnh khắc này Bạn đã biết rằng mẫu có ngữ cảnh - mô hình, bộ điều khiển và dạng xem.

Hãy bắt đầu với các mẫu một phần. Đây là đối tượng đơn giản nhất mà bạn có thể đưa vào mẫu của mình (mặc dù đối tượng có thể là một cái tên quá lớn đối với một phần mẫu). Ember.js sẽ chỉ lấy mẫu bạn chỉ định và trình bày nó trong mẫu gốc; trong trường hợp này, bối cảnh của cha mẹ sẽ được sử dụng - tức là. trong một phần mẫu, bạn sẽ có quyền truy cập vào mô hình, bộ điều khiển và chế độ xem gốc. Nói một cách đơn giản, tất cả các sự kiện sẽ được xử lý bởi chế độ xem và bộ điều khiển của cha mẹ.

Chế độ xem và thành phần khá giống nhau (trong thực tế, chế độ xem là lớp cha thành phần). Cả khung nhìn và thành phần đều có cái riêng mẫu riêng. Đằng sau khung nhìn và thành phần là đối tượng của chính nó. Sự khác biệt là hai những điểm chính. Đầu tiên, xử lý sự kiện - chính thành phần đó xử lý các sự kiện được đặt tên và chế độ xem chỉ đơn giản cung cấp chúng cho mẫu gốc, sau đó đưa chúng cho bộ điều khiển. Thứ hai, môi trường - thành phần hoàn toàn biệt lập và chỉ có thể hoạt động với các đối tượng mà bạn cung cấp cho nó; đến lượt khung nhìn có quyền truy cập vào tất cả các đối tượng có sẵn cho mẫu gốc. Từ góc nhìn của bối cảnh mẫu gốc, khung nhìn có quyền truy cập vào mô hình và bộ điều khiển nhưng có quyền riêng quan điểm riêng. Thành phần này bị cô lập hơn và không có quyền truy cập vào bất cứ thứ gì.

Phần tử cuối cùng được hiển thị. Đây là đối tượng phức tạp nhất trong tất cả các đối tượng có sẵn trong các mẫu. Khi bạn gọi kết xuất trong một mẫu, bạn cần cung cấp cho nó hai tham số - tên của mẫu và mô hình. Ember.js sẽ tìm mẫu và dựa vào tên của mẫu, nó sẽ tìm bộ điều khiển và khung nhìn. Sau đó, nó sẽ cung cấp cho bộ điều khiển một mô hình và sau khi bộ điều khiển xử lý mô hình đó, Ember.js sẽ chèn nó vào mẫu. Nói một cách đơn giản, với sự trợ giúp của tính năng kết xuất, bạn có thể tập hợp một số mẫu độc lập với các ngữ cảnh hoàn toàn khác nhau trên một trang; kết xuất không có quyền truy cập vào ngữ cảnh của mẫu gốc (thay vào đó, kết xuất có ngữ cảnh riêng) và tất cả các sự kiện sẽ được xử lý bởi bộ điều khiển khung nhìn và kết xuất.

Tôi hy vọng bạn thích phần giới thiệu lý thuyết về Ember.js. Nếu Ember.js khiến bạn quan tâm thì bạn có thể tiếp tục làm quen với nó bằng cách đọc trang chính thức

Dịch

Ngày nay, các ứng dụng Javascript phức tạp có thể được nhìn thấy ở khắp mọi nơi. Theo thời gian, chúng ngày càng trở nên phức tạp hơn và việc viết một chuỗi hàm gọi lại trong jQuery không còn được chấp nhận nữa. Các lập trình viên Javascript đang dần học được điều đó nhà phát triển thường xuyênđã biết từ hàng chục năm nay. Tổ chức và hiệu quả có thể đóng một vai trò quan trọng trong sự phát triển. Do đó, các framework Javascript MVC như Backbone, Knockout và Ember đã xuất hiện để lấp đầy khoảng trống giữa những người mới bắt đầu, những nhà phát triển trung cấp và có kinh nghiệm. Họ cung cấp khả năng khác nhau và chức năng đó thích hợp cho khác nhau người, tùy theo nhu cầu của họ.

Tôi nghĩ tôi xinh đẹp nhà phát triển giỏi... còn xa mới là tốt nhất, nhưng tôi có thể làm việc với công nghệ hiện có, mà tôi sử dụng trong quá trình phát triển của mình. Tôi đã để mắt đến những khuôn khổ này và Backbone và Ember đã tìm ra giúp tôi. Tôi đã chơi thử Backbone, thậm chí còn mua một video hướng dẫn về nó. Anh ấy tốt nhưng tôi vẫn thấy khó ép mình phải suy nghĩ như anh ấy. Tôi đã nghe nói về Ember chỉ vài tháng trước và nó ngày càng phát triển mạnh mẽ. Nó cung cấp rất nhiều tính năng mà tôi cần và tôi quyết định xem nó phù hợp với mình như thế nào. Ember cung cấp một số tính năng chính mà tôi thấy rất hấp dẫn, tính năng chính là liên kết dữ liệu. Bạn chỉ cần tạo một biến và khi giá trị của biến đó thay đổi, bất kỳ phần nào trong ứng dụng giám sát biến đó sẽ được cập nhật. Điều này sẽ tìm thấy công dụng của nó, ví dụ, trong các cuộc trò chuyện, v.v.

Hiện tại nhược điểm chính Ember so với Backbone là cái sau có nhiều hướng dẫn, bài viết và dự án đã hoàn thành trên Github. Trong khi trên Ember, bạn có thể tìm thấy rất ít tài liệu trên mạng hiển thị ngay lập tức tất cả nội dung bên trong của nó, nhưng lại bỏ lỡ những điều cơ bản nhất. Vì vậy, mục tiêu của tôi là viết một bài hướng dẫn giúp bạn bắt đầu sử dụng Ember ngay bây giờ. Vâng, ngoài những việc khác, tôi viết bài này để củng cố kiến thức của bản thân.

Ember.js được xây dựng trên kiến trúc MVC (Model-View-Controller) và bạn chỉ cần chia mã của mình thành 3 phần:

M = Model – tương tự như một mảng. Đây là nơi lưu trữ dữ liệu sẽ được ứng dụng của bạn sử dụng.
V = Chế độ xem là phần trực quan của ứng dụng của bạn - biểu mẫu, danh sách, v.v.
C = Bộ điều khiển – Hãy coi bộ điều khiển như một người điều khiển giao thông. Nó quản lý sự tương tác giữa các phần khác của ứng dụng. Khi người dùng nhấp vào nút, bộ điều khiển sẽ xác định chế độ xem nào sẽ được tải, từ đó xác định mô hình nào sẽ sử dụng để lưu dữ liệu.

Hãy bắt đầu nhé? Để bắt đầu, hãy tải xuống Bộ công cụ khởi đầu Ember.js. Giải nén nó vào một thư mục mà trình duyệt web của bạn có thể truy cập được. Mở index.html và js/app.js trong mục yêu thích của bạn soạn thảo văn bản. Trong app.js thêm dòng sau:

Chào mừng = Ember.Application.create();

Chúc mừng! Bạn đã tạo ứng dụng Ember đầu tiên của mình! Mở index.html trong trình duyệt của bạn và hài lòng với trang web mới của bạn. Đợi đã, không có gì ở đó... bạn nghĩ gì về điều này? Không có gì xuất hiện ngoại trừ tiêu đề và điều đó thật tuyệt. Tất cả những gì đã xảy ra là Ember đã tạo một ứng dụng mà bạn sẽ sử dụng trong suốt phần hướng dẫn. Một số nhà phát triển thích gọi đây là không gian tên. Điều này đơn giản có nghĩa là tất cả các phần khác trong ứng dụng của bạn sẽ bắt đầu bằng tên bạn đã chọn. Điều này giúp tránh xung đột tên biến và giữ mọi thứ theo thứ tự.

Có một điều mà hầu hết các nhà phát triển jQuery đều rất quen thuộc - document.ready cũ. Ember cung cấp một cái gì đó tương tự bằng cách chấp nhận một đối tượng tùy chọn trong phương thức tạo. Thêm mã, tải lại trang và bạn sẽ thấy thông báo chúc mừng. Hãy vỗ nhẹ vào đầu mình...bạn xứng đáng được như vậy!

Chào mừng = Ember.Application.create(( sẵn sàng: function())( notification("Bạn đã làm xong!"); ) ));

Việc tiếp theo chúng ta cần làm là thêm Model. Mỗi ứng dụng Ember có thể có nhiều mô hình và mỗi mô hình là một kiểu dữ liệu duy nhất. Trong một số khung công tác, một mô hình được biểu diễn dưới dạng một lớp. Về cơ bản, nó chỉ là một cấu trúc cho chúng ta biết cách làm việc với đối tượng này. Hãy tạo mô hình cho một số cuốn sách yêu thích của tôi.

Welcome.Book = Ember.Object.extend(( tiêu đề: null,

Điều tiếp theo chúng ta cần là một bộ điều khiển. Nhân tiện, ngoài việc điều khiển ứng dụng, bộ điều khiển trong Ember còn chuyển dữ liệu từ mô hình sang dạng xem. Đây là một bộ điều khiển đơn giản trong Ember:

Welcome.booksController = Ember.ArrayController.create();

Không hoàn toàn giống như việc tạo bộ điều khiển, nhưng việc này tạo ra một ArrayController chứa một mảng. Đây là nơi thông tin về sách của chúng tôi sẽ được lưu trữ. Nó ở đó, chỉ là bạn không nhìn thấy nó thôi. Bạn có thể chỉ định rõ ràng nội dung của mảng hoặc điền vào nó chẳng hạn. Điều này được thực hiện bằng cách truyền một đối tượng tùy chọn vào phương thức create:

Welcome.booksController = Ember.ArrayController.create(( content: ));

Bây giờ chúng ta đã có một mô hình và một bộ điều khiển, tất cả những gì còn lại là viết khung nhìn. Bạn có nhớ khi tôi nói rằng khung nhìn là phần trực quan của ứng dụng của bạn không? Điều này có nghĩa là nó sẽ nằm trong tệp index.html. Hãy viết bài thuyết trình của chúng ta trước và sau đó thảo luận về nó. Ngay bên dưới thẻ H1, thêm dòng sau:
((#view Ember.Button target="Welcome.booksController" action="loadBooks")) Tải sách ((/view)) ((#collection contentBinding="Welcome.booksController" tagName="ul")) ((content .title)) - ((content.author)), ((nội dung. thể loại))((/bộ sưu tập))

Một trong những điều tuyệt vời về Ember là nó đi kèm với một công cụ tạo mẫu tích hợp có tên là Handlebars. Các mẫu về cơ bản là phép thuật cốt lõi của Ember. Thông thường trong các mẫu bạn bao quanh một biến bằng một số chuỗi. Trong Handlebars đây là 2 dấu ngoặc nhọn.

Ember bắt đầu cuộc sống như một thư viện SproutCore do Apple phát triển làm cốt lõi cho các ứng dụng trực tuyến của họ như Mobile Me. SproutCore cũng bao gồm một bộ tiện ích không có trong Ember. Ember chỉ bao gồm việc cung cấp các thành phần biểu mẫu vì chúng có thể rất năng động. Trong trường hợp mẫu hoặc chế độ xem của chúng tôi, chúng tôi sử dụng các nút Ember. Điều này cho phép anh ấy làm tất cả công việc khó khăn cho chúng tôi. Nó nhận một mục tiêu (trong trường hợp của chúng ta là booksController) và một hành động. Vì vậy, khi ai đó nhấp vào nút, Ember sẽ hoạt động với phương thức LoadBooks của đối tượng Welcome.booksController.

Phần thứ hai khó hơn một chút nhưng tôi chắc chắn bạn có thể giải được. Trong Ember, một bộ sưu tập chỉ đơn giản là một con trỏ tới một nhóm dữ liệu, trong trường hợp của chúng tôi lại là Welcome.booksController . Ở đầu bài viết, tôi đã viết rằng dữ liệu liên kết là một trong những lý do khiến tôi quan tâm đến Ember. Và ở đây chúng ta có thể thấy hết sức mạnh của nó. Nội dung chỉ đơn giản trỏ đến biến nội dung trong booksController, trong khi Binding là bụi ma thuật. Việc thêm Ràng buộc vào cuối hầu hết các thuộc tính sẽ cho Ember biết rằng bạn muốn thực hiện liên kết hai chiều. Bạn thay đổi giá trị ở một bên và bên kia sẽ cập nhật. Cuối cùng, bộ sưu tập cho phép bạn thiết lập thẻ cơ sở, trong trường hợp của chúng tôi nó đơn giản danh sách có dấu đầu dòng(thẻ UL).

Nhân tiện, ký hiệu # và / cho Handlebars biết rằng đây chỉ là một phần (khối) của chế độ xem.

Bên trong bộ sưu tập là “thịt” các mẫu của chúng tôi. Hãy chú ý cách chúng tôi kết hợp HTML và các thẻ bên trong các mẫu của mình. Thật tiện lợi phải không? Một điều tinh tế khác là Ember không cần chỉ định rõ ràng thẻ mở hoặc đóng cho danh sách. Nó sẽ tự động thêm chúng vì nó biết chúng ta đang sử dụng danh sách có dấu đầu dòng. Khởi chạy ứng dụng và bạn sẽ thấy một nút cô đơn cần bạn bè. Việc nhấp vào nút thật khó khăn vì chúng tôi chưa có phương thức LoadBooks. Làm cách nào để thêm nó và tải một số dữ liệu?

Welcome.booksController = Ember.ArrayController.create(( content: , LoadBooks: function())( var self = this; $.getJSON("data/books.json", function(data) ( data.forEach(function(item ) ( self.pushObject(Chào mừng.Book.create(item)); )); )); ) ));

Bạn có nhớ khi chúng tôi nói rằng mô hình có thể chứa các phương thức tùy ý không? Mọi thứ trong Ember đều có thể chứa mã tùy ý, bao gồm cả ArrayController. Bây giờ, khi bạn tải trang của mình và nhấp vào nút “Tải sách”, phương thức loadBooks sẽ được gọi, phương thức này sẽ tải một số cuốn sách yêu thích của tôi. Đó là tất cả cho việc này ví dụ đơn giản. Tôi hy vọng bạn thích nó và cho Ember một cơ hội. Bạn có thể

Ngày nay, các ứng dụng Javascript phức tạp có thể được nhìn thấy ở khắp mọi nơi. Theo thời gian, chúng ngày càng trở nên phức tạp hơn và việc viết một chuỗi hàm gọi lại trong jQuery không còn được chấp nhận nữa. Các lập trình viên Javascript đang dần học hỏi những gì mà các nhà phát triển thông thường đã biết trong nhiều thập kỷ. Tổ chức và hiệu quả có thể đóng một vai trò quan trọng trong sự phát triển. Do đó, các framework Javascript MVC như Backbone, Knockout và Ember đã xuất hiện để lấp đầy khoảng trống giữa những người mới bắt đầu, những nhà phát triển trung cấp và có kinh nghiệm. Họ cung cấp các tính năng và chức năng khác nhau phù hợp với người khác, tùy theo nhu cầu của họ.

Tôi tự coi mình là một nhà phát triển khá giỏi... còn lâu mới là người giỏi nhất, nhưng tôi có thể làm việc với các công nghệ hiện có mà tôi sử dụng trong quá trình phát triển của mình. Tôi đã để mắt đến những khuôn khổ này và Backbone và Ember đã tìm ra giúp tôi. Tôi đã chơi thử Backbone, thậm chí còn mua một video hướng dẫn về nó. Anh ấy tốt nhưng tôi vẫn thấy khó ép mình phải suy nghĩ như anh ấy. Tôi đã nghe nói về Ember chỉ vài tháng trước và nó ngày càng phát triển mạnh mẽ. Nó cung cấp rất nhiều tính năng mà tôi cần và tôi quyết định xem nó phù hợp với mình như thế nào. Ember cung cấp một số tính năng chính mà tôi thấy rất hấp dẫn, tính năng chính là liên kết dữ liệu. Bạn chỉ cần tạo một biến và khi giá trị của biến đó thay đổi, bất kỳ phần nào trong ứng dụng giám sát biến đó sẽ được cập nhật. Điều này sẽ tìm thấy công dụng của nó, ví dụ, trong các cuộc trò chuyện, v.v.

Hiện tại, nhược điểm chính của Ember so với Backbone là Backbone có rất nhiều hướng dẫn, bài viết và dự án làm sẵn trên Github. Trong khi trên Ember, bạn có thể tìm thấy rất ít tài liệu trên mạng hiển thị ngay lập tức tất cả nội dung bên trong của nó, nhưng lại bỏ lỡ những điều cơ bản nhất. Vì vậy, mục tiêu của tôi là viết một bài hướng dẫn giúp bạn bắt đầu sử dụng Ember ngay bây giờ. Vâng, ngoài những việc khác, tôi viết bài này để củng cố kiến thức của bản thân.

Ember.js được xây dựng trên kiến trúc MVC (Model-View-Controller) và bạn chỉ cần chia mã của mình thành 3 phần:

M = Model – tương tự như một mảng. Đây là nơi lưu trữ dữ liệu sẽ được ứng dụng của bạn sử dụng.
V = Chế độ xem là phần trực quan của ứng dụng của bạn - biểu mẫu, danh sách, v.v.
C = Bộ điều khiển – Hãy coi bộ điều khiển như một người điều khiển giao thông. Nó quản lý sự tương tác giữa các phần khác của ứng dụng. Khi người dùng nhấp vào nút, bộ điều khiển sẽ xác định chế độ xem nào sẽ được tải, từ đó xác định mô hình nào sẽ sử dụng để lưu dữ liệu.

Hãy bắt đầu nhé? Để bắt đầu, hãy tải xuống Bộ công cụ khởi đầu Ember.js. Giải nén nó vào một thư mục mà trình duyệt web của bạn có thể truy cập được. Mở index.html và js/app.js trong trình soạn thảo văn bản yêu thích của bạn. Trong app.js thêm dòng sau:

Chào mừng = Ember.Application.create();

Chào mừng = Ember.Application.create(( sẵn sàng: function())( notification("Bạn đã làm xong!"); ) ));

Welcome.Book = Ember.Object.extend((tiêu đề: null, tác giả: null, thể loại: null ));

Welcome.booksController = Ember.ArrayController.create();

Welcome.booksController = Ember.ArrayController.create(( content: ));

((#view Ember.Button target="Welcome.booksController" action="loadBooks")) Tải sách ((/view)) ((#collection contentBinding="Welcome.booksController" tagName="ul")) ((content .title)) - ((content.author)), ((nội dung. thể loại))((/bộ sưu tập))

Phần thứ hai khó hơn một chút nhưng tôi chắc chắn bạn có thể giải được. Trong Ember, một bộ sưu tập chỉ đơn giản là một con trỏ tới một nhóm dữ liệu, trong trường hợp của chúng tôi lại là Welcome.booksController . Ở đầu bài viết, tôi đã viết rằng dữ liệu liên kết là một trong những lý do khiến tôi quan tâm đến Ember. Và ở đây chúng ta có thể thấy hết sức mạnh của nó. Nội dung chỉ đơn giản trỏ đến biến nội dung trong booksController, trong khi Binding là bụi ma thuật. Việc thêm Ràng buộc vào cuối hầu hết các thuộc tính sẽ cho Ember biết rằng bạn muốn thực hiện liên kết hai chiều. Bạn thay đổi giá trị ở một bên và bên kia sẽ cập nhật. Cuối cùng, các bộ sưu tập cho phép bạn đặt thẻ cơ sở, trong trường hợp của chúng tôi chỉ đơn giản là một danh sách có dấu đầu dòng (thẻ UL).

Nhân tiện, ký hiệu # và / cho Handlebars biết rằng đây chỉ là một phần (khối) của chế độ xem.

Bạn có nhớ khi chúng tôi nói rằng mô hình có thể chứa các phương thức tùy ý không? Mọi thứ trong Ember đều có thể chứa mã tùy ý, bao gồm cả ArrayController. Bây giờ, khi bạn tải trang của mình và nhấp vào nút “Tải sách”, phương thức loadBooks sẽ được gọi, phương thức này sẽ tải một số cuốn sách yêu thích của tôi. Đó là ví dụ đơn giản này. Tôi hy vọng bạn thích nó và cho Ember một cơ hội. Bạn có thể tải xuống mã nguồn mẫu trên Github.

Đợi một phút nữa. Nếu bạn giống tôi, bạn vẫn còn thắc mắc. Nhiều câu hỏi. Tôi viết bài này vì tôi có thắc mắc và phải mất hàng giờ mới tìm được câu trả lời. Hầu hết các câu hỏi tôi đã thực sự được trả lời trong bài viết này. Nếu bạn vẫn còn thắc mắc, thì bạn có thể. Nếu tôi không biết câu trả lời, tôi sẽ tìm nó và trả lời bạn.

Hiện tại có một số lượng rất lớn Thư viện JavaScript, được thiết kế để thao tác DOM. Tuy nhiên, khi cần xây dựng một ứng dụng một trang, nhiều framework bị bỏ qua.

Không phải là các thư viện như jQuery không thể được sử dụng để xây dựng các ứng dụng một trang phức tạp. Chúng chỉ được tạo ra cho các mục đích khác và chỉ có thể quản lý trạng thái, giao diện và tuyến đường bằng cách sử dụng các plugin đặc biệt. Đồng ý rằng đây không phải là nhiều nhất Quyết định tốt nhất. Theo tôi, để giải quyết vấn đề bạn cần sử dụng các công cụ thích hợp.

Ember.js chính xác là những gì chúng ta cần khi nói đến các ứng dụng một trang phức tạp. Với sự trợ giúp của nó, bạn có thể tạo ứng dụng phức tạp. Các nhà phát triển dựa trên khả năng làm việc theo nguyên tắc MVC.

Mục tiêu chính của các bài viết này là tìm hiểu về Ember.js, các khía cạnh và khả năng khác nhau của nó. Hôm nay chúng ta sẽ bắt đầu với Khái niệm chung, nhưng trong tương lai chúng tôi sẽ bắt đầu triển khai các ví dụ.

Bắt đầu nào!

Khái niệm cơ bản

Điều đầu tiên bạn cần hiểu là Ember.js là một framework để tạo các trang web phi truyền thống. Các khung như jQuery và Mootools phù hợp hơn với các trang web cổ điển. Các ứng dụng được xây dựng trên Ember.js giống các ứng dụng dành cho máy tính để bàn hơn.

Như tôi đã đề cập trước đó, Ember.js sử dụng MVC làm hệ thống phân phối mã. Nếu bạn chưa biết gì về MVC thì bạn cần đọc nhiều nhất bài viết đơn giản, trong đó công việc theo sơ đồ này được mô tả. Nếu bạn đã từng sử dụng Backbone.js trước đây thì Ember.js sẽ không làm bạn khó hiểu.

Các mẫu rất phổ biến trong Ember.js và được cung cấp bởi thư viện Handlebars. Với sự trợ giúp của nó, chúng ta có thể viết các mẫu để tạo mã HTML động. Sử dụng Ember.js, chúng ta sẽ chuyển dữ liệu vào mẫu. Dưới đây là mẫu ví dụ để hiển thị người dùng trong danh sách không có thứ tự:

Xin chào, ((tên))!

Từ khóa #each có nghĩa là một vòng lặp thông thường sẽ lặp qua các bản ghi từ biến people. Với các biểu thức như ((tên)), chúng tôi sẽ trích xuất thông tin cần thiết. Hơn ví dụ phức tạp, chúng ta sẽ xem xét nó sau.

Handlebars là một công cụ tạo mẫu thực sự tốt có thể được sử dụng riêng biệt với Ember.js. Bạn có thể tìm thêm thông tin trên trang web chính thức của họ.

Thiết lập Ember

Ember.js được hỗ trợ bởi các thư viện khác, vì vậy bạn sẽ cần bao gồm jQuery và Handlebars. Dừng lại! Chẳng phải trước đó tôi đã nói rằng jQuery và Ember được thiết kế cho các mục đích khác nhau sao? Có, nhưng trên thực tế, tình hình có vẻ hơi khác một chút: nhóm phát triển quyết định không phát minh lại bánh xe. Họ đã chọn jQuery để làm công việc tốt nhất: thao tác với DOM. Họ được hướng dẫn bởi những suy nghĩ tương tự khi kết nối Tay lái.

Trên thực tế, bạn không cần phải truy cập các trang khác nhau để có được các liên kết thư viện mà bạn cần. Bạn có thể tìm thấy mọi thứ bạn cần trên trang Ember.js trên Github. Tải xuống Starter-kit và nhận:

Than hồng 1.0 RC1
Ghi đông 1.0 RC3
jQuery 1.9.1

Tất cả các tập tin này ngay lập tức được phân phối vào các thư mục. Đối với ứng dụng của chúng tôi, tốt nhất là tạo tập tin riêng. Hãy gọi nó là app.js:

Tính năng Ember

Trước khi viết bất kỳ mã nào, tốt hơn hết bạn nên biết các tính năng cơ bản của Ember.js

Mẫu

Như tôi đã nói trước đó, khi làm việc với Ember, các mẫu thường được sử dụng. Đây là một ví dụ về kết nối một mẫu:

((firstName)) ((lastName))

Chúng tôi viết tất cả những điều này trực tiếp tới tài liệu HTML. Sau đó, khi trang khởi chạy, Ember sẽ khởi động cơ chế của nó và tất cả các mẫu sẽ chứa đầy thông tin. Trong ví dụ này, chúng ta in giá trị của hai biến: ((firstName)) và ((lastName)).

Tuyến đường

Bộ định tuyến giúp phản ứng với những thay đổi trong trạng thái ứng dụng và kết nối nguồn lực cần thiết, tùy thuộc vào điều hướng trang. Các thao tác có thể thực hiện: trích xuất dữ liệu từ mô hình, chuyển dữ liệu đến bộ điều khiển, dạng xem và mẫu.

Việc định tuyến được thực hiện bằng cách tạo các tuyến đường cho các phần cụ thể trong ứng dụng của bạn. Các tuyến xác định các phần trong ứng dụng của bạn cũng như các url được liên kết với chúng. URL là đối tượng chính để xác định trạng thái mà ứng dụng cần hiển thị cho người dùng.

App.Router.map(function() ( this.route("about"); // Đưa chúng ta đến "/about" ));

Hành vi của tuyến đường (truyền dữ liệu từ mô hình) được xác định bằng cách sử dụng đối tượng Ember toàn cầu chịu trách nhiệm điều hướng ứng dụng. Một ví dụ về trích xuất dữ liệu từ một mô hình trông như thế này:

App.EmployeesRoute = Ember.Route.extend(( model: function() ( return App.Employee.find(); ) ));

Ngay khi người dùng đến địa chỉ “/employees”, bộ định tuyến sẽ thực hiện cuộc gọi đến mô hình và đưa ra danh sách nhân viên.

Người mẫu

Các mô hình được thiết kế để chấp nhận hoặc trả lại biểu diễn đối tượng dữ liệu được sử dụng trong ứng dụng của chúng tôi. Nó chỉ có thể là một mảng hoặc phản hồi JSON từ bên thứ ba tập tin PHP. Thư viện Ember Data cung cấp API tốt để ánh xạ và cập nhật dữ liệu.

Bộ điều khiển

Bộ điều khiển được thiết kế để lưu trữ các đối tượng và tương tác với các mô hình. Họ đóng vai trò trung gian, truy cập mô hình và truyền dữ liệu đến các khung nhìn và mẫu. Mẫu phải luôn được kết nối với bộ điều khiển.

Bạn nên biết rõ rằng bộ điều khiển được thiết kế để phân phối dữ liệu mà nó nhận được từ mô hình.

Trong bộ điều khiển, bạn có thể ghi lại dữ liệu khác mà ứng dụng cần nhưng không được gửi đến phần phụ trợ để lưu trữ.

đại diện

Trong Ember.js, các chế độ xem được thiết kế để theo dõi các sự kiện của người dùng và chuyển đổi chúng thành những gì ứng dụng của bạn cần phản ứng. Nếu người dùng nhấp vào nút để xóa một liên hệ, chế độ xem sẽ theo dõi sự kiện này và cho ứng dụng biết trạng thái của liên hệ đó.

Quy tắc đặt tên

Sử dụng Ember.js, bạn có thể giảm số lượng mã bằng cách thiết lập hệ thống đặt tên đối tượng cho chính mình. Tùy thuộc vào cách bạn đặt tên cho tuyến đường, tên của bộ điều khiển, kiểu máy, dạng xem và mẫu sẽ phụ thuộc. Ví dụ: chúng tôi đã tạo tuyến đường “nhân viên”:

App.Router.map(function() ( this.resource("nhân viên"); ));

Tôi sẽ đặt tên cho các thành phần của mình như thế này:

Lộ trình: App.EmployeesRoute
Bộ điều khiển: App.EmployeesController
Model: App.Employee
Chế độ xem: App.EmployeesView
Bản mẫu: nhân viên

Quy ước đặt tên này thuận tiện vì nhiều lý do. Đầu tiên chúng ta thấy ngay mối quan hệ ngữ nghĩa giữa các thành phần. Thứ hai, Ember sẽ có thể tạo các đối tượng bị thiếu một cách độc lập. Tất cả điều này có thể thực hiện được khi ứng dụng được khởi tạo:

Ứng dụng Var = Ember.Application.create();

Một dòng xác định mối quan hệ giữa bộ điều khiển, đối tượng, dạng xem và mẫu:

Lộ trình: App.ApplicationRoute
Bộ điều khiển: App.ApplicationController
Chế độ xem: App.ApplicationView
Bản mẫu: ứng dụng

Khi điều hướng đến “/nhân viên”, Ember kích hoạt các tài nguyên khác:

App.EmployeesRoute
App.EmployeesController
mẫu nhân viên

Nếu không có đối tượng nào như vậy trong ứng dụng, Ember sẽ tạo chúng nhưng sẽ không xuất bất cứ thứ gì cho đến khi bạn tạo mô hình trả về dữ liệu cho đầu ra. Đây là lý do vì sao quy ước đặt tên thành phần lại rất quan trọng. Nó sẽ giúp Ember xác định tài nguyên nào sẽ kết nối mà không cần cấu hình thủ công.

Cái gì tiếp theo?

Đó là tất cả cho ngày hôm nay. Chúng tôi đã làm quen với Ember.js và các thành phần của nó. Trong phần tiếp theo của loạt bài này chúng ta sẽ giải quyết công dụng thực tế thư viện này và trong thực tế, chúng tôi sẽ thử nhiều thứ mà Ember cung cấp cho chúng tôi.