2012-06-24 5 views
3

ember.js/rails 애플리케이션을 구축 중입니다. 모든 핸들 바 템플릿은 .js 파일에 저장됩니다. 라우터가 상태를 바꿀 때 DOM에 어떻게 삽입되는지 이해하고 싶습니다. 엠버의 어떤 부분이 이것을합니까? 템플릿을 배치하려면 ember에게 어떻게 말합니까?DOM에 템플릿을 삽입하는 데 필요한 ember.js 구성 요소는 무엇입니까?

지금 내 템플릿은 <body>에 붙습니다. 나는 jsFiddle here입니다.

나는 Ember.Application에서 rootElement을 설정하는 것을 알고 있지만,이 응용 프로그램이 페이지의 다른 요소를 제어하기를 원합니다.

핸들 바/HTML :

<script type="text/x-handlebars" data-template-name="application"> 
    <h2>I'm the content</h2> 
    <p>This should be inbetween the header &amp; footer</p> 
    <p><strong>time</strong> {{time}}</p> 
</script> 

<header> 
    <h1>Application</h1> 
</header> 
<article> 
    <div id="content"></div> 
</article> 
<footer> 
    <a href="http://blog.deanbrundage.com" target="_blank">by Dean</a> 
</footer> 

자바 스크립트 :

window.App = Ember.Application.create(); 

App.Router = Em.Router.extend({ 
    initialState: 'root.home', 
    root: Em.Route.extend({ 
     home: Em.Route.extend({ 
      view: App.ApplicationView 
     }) 
    }) 
}); 

App.ApplicationController = Em.Controller.extend({ 
    time: Date() 
}); 
App.ApplicationView = Em.View.extend({ 
    templateName: 'application' 
}); 

App.initialize(); 

답변

5

Ember.js의 현재 구현은 here을 참조하여 ApplicationView을 응용 프로그램의 rootElement에 추가합니다.

한 가지 가능한 해결책은 당신의 ApplicationViewappendTo을 덮어 http://jsfiddle.net/pangratz666/m8L6Z/을 볼 수있을 것입니다 :

자바 스크립트 :

App.ApplicationView = Em.View.extend({ 
    templateName: 'application', 
    appendTo: function(){ 
     this._super('#content'); 
    } 
}); 
+0

감사합니다. 내가 가장 관심을 가지는 것은 마지막 HTML 페이지에 뷰를 추가하는 마지막 솔루션 (http://jsfiddle.net/pangratz666/Yu3BX/)이다. 이 작업은 '라우터'로 할 수 있습니까 아니면 내 전체 페이지를 핸들 막대 템플릿에 집어 넣을 수 있습니까? –

+0

명시된 정보가 문제를 해결하지 못했기 때문에 제 답변을 업데이트했습니다. – pangratz

+0

만약 내가 새 일만 .. 하루 전 핸들 바에 내 전체 사이트 퍼팅 하루 낭비 :) – Stephan

1

당신이 마스터, 삽입 및 템플릿의 변화가 출구를 통해 처리를 사용하는 경우. the official guide을 확인하십시오.

이전 버전의 Ember를 사용하는 경우 더 많은 수동 프로세스입니다.

+0

내가 출구를 이해합니다. ** 첫 번째 ** 템플릿을 DOM에 어떻게 가져 옵니까? jsFiddle을 살펴보십시오. –

관련 문제