Ember.js로 웹 응용 프로그램 만들기

Question

Ember.js에 대해 알아 냈습니다. 흥미 롭습니다. 나는 그것을 사용하는 방법을 배우기 위해 작은 노트 애플 리케이션을 만들고 싶습니다.

내가 염두에두고있는 기본 레이아웃은 카테고리가 있고 각 카테고리에 메모가 포함될 수 있습니다. UI의 경우 클릭 할 수있는 카테고리가있는 사이드 바가 있고 카테고리의 노트가 다른쪽에 표시됩니다.

하지만 전체 템플릿/레이아웃 시스템을 이해할 수는 없습니다. 템플릿 시스템 자체는 매우 간단합니다 (Rails 뷰와 비슷한 정도). 그러나 레이아웃을 위해 무엇을합니까? 예를 들어 Rails를 사용하면 레이아웃을 매우 쉽게 정의한 다음 개별 뷰를 레이아웃에 추가 할 수 있습니다. 이것은 Ember.js와 나에게 불분명 한 것 같습니다.

Answer 1

단순한 래퍼 스타일 레이아웃의 경우 Ember에 내장 된 layout support을 사용할 수 있습니다. 단일 {{yield}} 만 지원하므로 응용 프로그램에 너무 제한 될 수 있습니다.

좀 더 강건 해져서 ghempton의 Ember Layout을 살펴보십시오. Rails 레이아웃과 매우 흡사하다는 것을 알게 될 것입니다. 그는 live example here입니다.

마지막으로 Ember에서 (레이아웃 사용 대신 또는 레이아웃 사용 외에도) 뷰 계층 구조를 만드는 것이 매우 쉽습니다. Tom Dale은 Ember 자료와 예를 들어 here의 훌륭한 컬렉션을 보유하고 있습니다. 언급 @rharper, 당신은 또한 outlet 도우미를 사용할 수있는 방법 게다가

Answer 2

, 느릅 나무는 5a4917b 커밋에 도입되었습니다.

핸들 바 :

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

자바 스크립트 :

당신은 예를 들어 here 찾을 수 있습니다이 예에서

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);