Các kỹ thuật dựng hình khác nhau trong các thẻ điều khiển emberjs

Question

Gần đây tôi đã đọc rất nhiều về emberj nhưng điều gì đó không thực sự rõ ràng với tôi: Tôi có cảm giác rằng có nhiều cách khác nhau để hiển thị mẫu. Ai đó có thể giải thích sự khác biệt giữa chúng:

{{render}} 
{{partial}} 
{{template}} 
{{outlet}} 

Tôi đang sử dụng pre4, vì vậy nếu một số từ khóa này lỗi thời, vui lòng thông báo.

Answer 1

Bạn có thể tìm kiếm nguồn Ember.JS cho tất cả những điều này bằng cách tìm kiếm: Ember.Handlebars.registerHelper('?'. Ví dụ, để tìm ra một phần nơi template được xác định, tìm kiếm: Ember.Handlebars.registerHelper ('mẫu'

{{template}}

là tương tự như {{partial}}, nhưng tìm kiếm mẫu mà bạn xác định trong Ember.TEMPLATES băm Từ mã nguồn chúng ta có thể thấy một ví dụ:.. Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>'); và sau đó chúng ta có thể làm cho nó như vậy

tôi nghe một tiếng thì thầm rằng {{template}} là @deprecated, nhưng tôi có thể không tìm thấy nơi tôi tìm thấy thông tin đó vào lúc này. Tuy nhiên, điều đáng nói đến là tôi chưa bao giờ thấy mình sử dụng cái này. Thay vào đó, tôi thích {{partial}}.

Edit: Có vẻ như thể nó không được @deprecated như của 3df5ddfd4f. Lỗi của tôi!

{{}} phần

này khác với cách tiếp cận {{render}} trong đó controller và view được thừa kế từ bối cảnh đó gọi nó. Ví dụ: nếu bạn đang ở trong UserRoute và bạn tải một phần vào mẫu người dùng của mình, thì UserView và UserController cả hai sẽ được chuyển đến một phần của bạn, để họ có thể truy cập chính xác cùng thông tin với cha mẹ hiện tại của nó.

Tên một phần, khi được xác định, bắt đầu bằng dấu gạch dưới. Ví dụ: một phần Profile sẽ có data-template-name của: data-template-name="_profile" nhưng được chèn vào chế độ xem của bạn dưới dạng {{partial "profile"}}.

{{}} ổ cắm

Có thể bạn sẽ thấy mình sử dụng cái này rất nhiều. Nó chủ yếu được sử dụng trong trường hợp các sự kiện outlet thay đổi thường xuyên, dựa trên tương tác của người dùng. Bằng cách chuyển sang (this.transitionTo/{{#linkTo}}) một trang khác, Ember chèn chế độ xem vào {{outlet}} và đính kèm controller và view có liên quan.

Ví dụ, nếu bạn đang chuyển vào /#/vật nuôi sau đó, theo mặc định, Ember sẽ được tải PetsView vào {{outlet}}, và đính kèm các PetsController, tất cả điều này sau khi initialising các PetsRoute để nghe hướng dẫn trước khởi tạo khung nhìn và tìm bộ điều khiển.

{{}} làm

Đây là một hỗn hợp của một {{outlet}} và {{partial}}. Nó được sử dụng cho các trang tĩnh không chuyển sang các trang khác (như là outlet), nhưng nó không kế thừa bộ điều khiển và dạng xem (như là một partial không).

Tốt hơn với ví dụ. Giả sử bạn có điều hướng. Thông thường, bạn sẽ chỉ có một điều hướng và nó sẽ không thay đổi cho một điều hướng khác, nhưng bạn muốn điều hướng có bộ điều khiển và chế độ xem riêng và không được kế thừa từ ngữ cảnh (có thể là ApplicationRoute). Do đó khi bạn chèn điều hướng ({{render "navigation"}}), Ember sẽ đính kèm App.NavigationController và App.NavigationView.

Tóm tắt

• template: tư vấn một hash toàn cầu và chèn xem khi nó tìm thấy nó (có thể sớm trở thành @deprecated);
• partial: Được sử dụng để chia các chế độ xem phức tạp và kế thừa bộ điều khiển/chế độ xem từ cha mẹ (nếu bạn đang ở trong UserController, thì phần cũng sẽ có quyền truy cập vào chế độ xem này và chế độ xem được liên kết).
• outlet: Được sử dụng rộng rãi nhất và cho phép bạn nhanh chóng chuyển đổi các trang cho các trang khác. Đã gắn bộ điều khiển/chế độ xem có liên quan.
• render: Tương tự như lối thoát, nhưng được sử dụng cho các trang liên tục trên toàn bộ ứng dụng. Giả sử bộ điều khiển/chế độ xem có liên quan và không kế thừa chúng.

Tôi có giải thích rõ cho họ không?

Chỉ cần làm rõ:

• từng phần: điều khiển thừa kế, kế thừa quan điểm, không thể chuyển đổi;
• Outlet: Bộ điều khiển có liên quan, chế độ xem có liên quan, có thể chuyển đổi;
• Render: Bộ điều khiển có liên quan, chế độ xem có liên quan, không thể chuyển đổi;

Answer 2

Hướng dẫn cũng cung cấp một số thông tin hữu ích here! Dưới đây là một bản tóm tắt nhanh chóng:

Answer 3

tôi muốn gửi một câu trả lời ở đây là thực sự giúp tôi làm rõ khi nào thì sử dụng khác nhau template kỹ thuật -

Route

Sử dụng một tuyến đường là khi bạn cần một lộ trình đầy đủ. A 'con đường' có một URL duy nhất và bao gồm các lớp học được tạo ra hoặc sử dụng xác định các loại vật liệu làm -

1. Route (Ember.Route)
2. Controller (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
3. View (Ember.View)
4. Template (tay lái mẫu)

{{}} làm

Sử dụng {{render}} helper khi bạn cần một cái nhìn nhưng vẫn cần cung cấp một số chức năng với bộ điều khiển. {{render}} không không có một URL duy nhất và bao gồm các nội dung sau -

1. Controller (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
2. View (Ember.View)
3. Template (tay lái mẫu)

{{component}}

Sử dụng trình trợ giúp {{component}} khi bạn đang xây dựng một mẫu thường được sử dụng lại độc lập với ngữ cảnh được hiển thị bên trong. Một ví dụ tốt có thể là nếu bạn đang xây dựng một trang web bán lẻ và muốn có một cái nhìn sản phẩm bất khả tri về nơi nó được hiển thị. {{component}} không không có một URL duy nhất hay một controller nhưng thay vào đó có một lớp component và bao gồm các nội dung sau -

1. Component (Ember.Component)
2. Template (tay lái mẫu)

{{partial}}

Sử dụng trợ giúp {{partial}} khi bạn chỉ đơn giản là tái sử dụng một số đánh dấu. {{partial}} không không có một URL duy nhất và cũng không ủng hộ bất kỳ đặc biệt như một thành phần và bao gồm các nội dung sau -

1. Template (tay lái mẫu)