2016-06-21 7 views
0

나는bower 구성 요소 (getmdl) js를 ember에 포함시키는 방법은 무엇입니까?

var app = new EmberApp(defaults, { 
    sassOptions: { 
     includePaths: ['bower_components/material-design-lite/src'] 
    } 
    }); 

    app.import('bower_components/material-design-lite/material.js'); 

..

그래서 나는 내 응용 프로그램에 포함 .. 이물을 통해 material-design-lite 설치하고 내 스타일로 가져 ..

@import "_color-definitions"; 

$color-primary: $palette-blue-500; 
$color-accent: $palette-orange-400; 

@import "material-design-lite"; 

스타일이 제대로 넣었지만, 구성 요소 탭과 메뉴의 경우처럼 자바 스크립트에 의존하는 것은 작동하지 않습니다.

탭을 클릭해도 아무 변화가 없습니다. ens

답변

2

당신은 올바른 길을 가고 있습니다. 그러나 ember.js는 이후 DOM 을 만들고 재질 디자인 라이트 구성 요소를 초기화했습니다. 따라서 초기화 할 DOM 요소를 찾을 수 없습니다.

재료 설계 라이트의 소스 코드를 보면서, 나는 당신이 기능 (재) 모든 구성 요소를 초기화하고에

componentHandler.upgradeElement(yourElement); 
// or 
componentHandler.upgradeElements(yourElementList); 

(재에

componentHandler.upgradeDom(); 

를 사용할 수있는 것으로 나타났습니다 -) 특정 구성 요소를 초기화합니다.

는 구성 요소에서 탐색 버튼을 마무리하고 didInsertElement 후크를 통해 그것들을 초기화 할 수 ember.js이 점을 통합하려면 :

// file: components/my-navigation/component.js 
/* global componentHandler */ 
export default Ember.Component.extend({ 
    didInsertElement() { 
    Ember.run.scheduleOnce('afterRender', this, function() { 
     componentHandler.upgradeElement(this.$()[0]); 
    }); 
    } 
}); 
+0

좋아 내가 내 application.hbs에서 MDL 요소가 있다면? – Chaitanya