Wie Bower Komponente (Getmdl) Js in Glut enthalten?

Question

ich installieren material-design-lite über Bower ..

Also habe ich in meiner app enthalten ..

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

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

und Import in meinen Stil ..

@import "_color-definitions"; 

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

@import "material-design-lite"; 

Der Stil korrekt geladen wird, sondern Komponenten die auf JavaScript angewiesen sind, funktionieren nicht, wie es bei Registerkarten und Menüs der Fall ist

Ich versuche, Tab Klick und nichts happ zu ändern ens

Answer 1

Sie sind auf dem richtigen Weg. Aber ember.js baut das DOM nach die Material-Design-Lite-Komponente wurde initialisiert. Es kann also keine zu initialisierenden DOM-Elemente finden.

Während auf den Quellcode von Material Design lite suchen, bemerkte ich, dass Sie die Funktion

componentHandler.upgradeDom(); 

zu (re-) initialisiert alle Komponenten verwenden können, und

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

(wieder -) initialisieren bestimmte Komponenten.

Um dies in Ember.js integrieren Sie Ihre Navigation und Schaltflächen in Komponenten einpacken konnte und initialisieren sie über den didInsertElement Haken:

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