Tworzenie aplikacji internetowych za pomocą Ember.js

Question

Właśnie dowiedziałem się o Ember.js i wygląda to interesująco. Chciałbym stworzyć małą aplikację do notatek, aby nauczyć się jej używać.

Podstawowy układ, który mam na myśli, to posiadanie kategorii, a każda kategoria może mieć notatki. Dla interfejsu użytkownika będzie pasek boczny z kategoriami, które będą można kliknąć, a uwagi dla kategorii będą wyświetlane po drugiej stronie.

Ale nie mogę w pełni zrozumieć całego układu szablonu/układu. Sam system szablonów wydaje się dość prosty (wystarczająco podobny do widoków Rails). Ale co robisz dla układów? Dzięki Railsom możesz na przykład bardzo łatwo definiować układy, a następnie dodawać do nich pojedyncze widoki. Wydaje mi się to niejasne z Ember.js.

Answer 1

Aby uzyskać prosty układ w stylu opakowania, można użyć wbudowanego modułu Ember layout support. Obsługuje tylko jeden kod {{yield}}, więc może być zbyt ograniczony dla twojej aplikacji.

Dla czegoś nieco bardziej wytrzymałego spójrz na gflona Ember Layout. Myślę, że znajdziesz go bardzo podobnie do układów Rails. Ma numer live example here.

Wreszcie, dość łatwo jest stworzyć hierarchię widoków w Ember (zamiast lub oprócz używania układów). Tom Dale ma dobry zbiór zasobów Ember i przykładów here.

Answer 2

Oprócz podejścia @rharper wspomniano, można również użyć outlet pomocnika, wich został wprowadzony w popełnić 5a4917b.

można znaleźć przykład here:

Kierownice:

<script type="text/x-handlebars" data-template-name="main" > 
    Main View 
    {{outlet contentView}} 
    {{outlet footerView}} 
</script> 

JavaScript:

App.viewController = Ember.Object.create({ 
    footerView: Ember.View.create({ 
     templateName: 'footer' 
    }), 
    contentView: Ember.View.create({ 
     templateName: 'content' 
    }) 
}); 

Ember.View.create({ 
    controllerBinding: 'App.viewController', 
    templateName: 'main' 
}).append(); 

Ember.run.later(function(){ 
    App.viewController.set('contentView', Ember.View.create({ 
     templateName: 'new-content' 
    })); 
}, 1000);