2014-06-09 2 views
2

레일 응용 프로그램을 만들고 엠버를 사용하여이 응용 프로그램을 구현할 계획입니다. 기본적으로 나는 엠버 응용 프로그램과 링크하는 하나의 경로를 원하지만 다른 페이지는 전통적인 레일입니다. 그러나 기본적으로 엠버 (ember)는 엠버 템플릿을 모든 단일 페이지의 body 태그에 삽입하는 것으로 보이지만, 특정 페이지에서만 발생하기를 원합니다.Rails Ember 하이브리드 응용 프로그램

예를 들어, '/ ember'경로를 application.hbs가 렌더링되는 ember 응용 프로그램으로 지정합니다. 다른 경로는 일반 레일로 처리되고 ember는 페이지 내에 템플릿을 삽입하지 않습니다.

어떻게해야합니까?

답변

2

비슷한 설정이 있는데, 특정 요소에만 연결할 수있는 엠버 앱 만 있습니다.하지만 큰 변화는 아닙니다. 속임수는 당신이 말할 때까지 엠버가 시작하지 못하도록 지시하는 deferReadiness입니다. 따라서 엠버 응용 프로그램이 있어야하는 페이지에 고유 한 것을 추가하고 다른 페이지에서 제외 시키십시오 (지연 가능하지 않은 경우).

window.App = App = Ember.Application.create({ 
    rootElement: '#ember-container' 
}); 

// AKA don't start the app cause aint nothing to hook up to 
if($('#ember-container').length==0){ 
    App.deferReadiness(); 
} 
0

이렇게하려면 ember-cli-rails를 사용할 수 있습니다.

엠버 응용 프로그램을 특정 경로에 마운트하도록 레일을 구성 할 수 있습니다.

# config/routes.rb 

Rails.application.routes.draw do 
    mount_ember_app :frontend, to: "/ember" 
end 

원하는 경우 나머지 레일과 동일한 레일 레이아웃을 사용하고 특정 요소에서만 엠버를 렌더링 할 수도 있습니다.

<%# app/views/posts/index.html.erb %>                     

<div id="ember-application"></div>                     
<%= include_ember_script_tags :frontend %>                   
<%= include_ember_stylesheet_tags :frontend %>                  

트릭은 엠 측에 설정/environment.js에 rootElement를 설정하는 것이다.

/* frontend/config/environment.js */                     
/* eslint-env node */                         

module.exports = function(environment) {                    
    var ENV = {                           
    modulePrefix: 'frontend',                       
    environment: environment,                       
    baseURL: '/',                          
    locationType: 'auto',                        
    //locationType: 'none',                       
    EmberENV: {                          
     FEATURES: {                          
     // Here you can enable experimental features on an ember canary build           
     // e.g. 'with-controller': true                    
     }                            
    },                            

    APP: {                           
     // Here you can pass flags/options to your application instance             
     // when it is created                       
     rootElement: '#ember-application'                    
    },                            

더 이상 도움이 필요하면 알려주세요.

관련 문제