2016-06-21 4 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"; 

スタイルが正しくセットされているが、部品タブとメニューの場合と同じようにjavascriptに依存するものはありません

タブをクリックしても何も起こりません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

関連する問題