Как включить компонент bower (getmdl) js в ember?

Question

установить material-design-lite через беседку ..

Так я включаю в мое приложение ..

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

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

И импорт в моем стиле ..

@import "_color-definitions"; 

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

@import "material-design-lite"; 

Стиль загружен правильно, но компоненты которые полагаются на javascript, не работают, как в случае вкладок и меню

Я пытаюсь изменить вкладку, нажав и ничего не сделаю ens

Answer 1

Вы на правильном пути. Но ember.js строит DOM после был инициализирован компонент lite материала. Поэтому он не может найти какие-либо элементы DOM для инициализации.

При просмотре исходного кода материала конструкции облегченного, я заметил, что вы можете использовать функцию

componentHandler.upgradeDom(); 

к (ре) инициализации всех компонентов, и

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

(вос -) инициализировать определенные компоненты.

Чтобы интегрировать это в ember.js можно завернуть в навигацию и кнопки в компонентах и ​​инициализировать их через didInsertElement крючок:

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