在 Ember.js 应用程序中初始化 Bootstrap Material Design答案

【问题标题】：initialize Bootstrap Material Design in Ember.js App在 Ember.js 应用程序中初始化 Bootstrap Material Design
【发布时间】：2016-01-18 10:03:54
【问题描述】：

我一周前开始学习 Ember.js，我正在尝试将 Bootstrap Material Design 集成到我的应用程序中。我已阅读说明我需要致电的文档：

$.material.init()

我试图创建一个实例初始化程序并将这段代码放入，但什么也没发生。

谁能帮我在我的 Ember 应用中初始化材质效果？

【问题讨论】：

一方面，您可以直接将其放在 index.hmtl 文件中的脚本标记中
感谢 @ManishKr.Shukla，但这不是 Ember 的做法。

标签： javascript ember.js material-design ember-cli bootstrap-material-design

【解决方案1】：

我找到了答案。根据 Ember 文档，我们可以使用 Application Instance Initializer，它可以在我们的 App 加载时运行代码。

应用程序实例初始化程序在应用程序实例加载时运行。它们提供了一种配置应用程序初始状态的方法，以及设置应用程序实例本地的依赖注入（例如 A/B 测试配置）。

所以，我刚刚使用 ember-cli 生成了一个新的实例初始化程序

ember generate instance-initializer bootstrap-material

并调用Bootstrap Material Design JS函数：

// app/instance-initializers/bootstrap-material.js
import Ember from 'ember'

export function initialize(applicationInstance) {
    Ember.$.material.init();
};

export default {
    name: 'bootstrap-material',
    initialize: initialize
};

这就是我为使其正常工作所做的一切。希望对您有所帮助。

【讨论】：

完全一样，但遗憾的是它不起作用（使用 Ember 2.3）。 Ember.$.material 可用，但 init()-call 什么也不做。有什么想法吗？
Did Ember.run.schedule('afterRender', this, function () { Ember.$.material.init(); } 在我的 ApplicationController 的 setupController() 内，这对我有用。
它可能在 ember 2.3 中发生了变化。我正在使用 ember 2.0。你看过文档吗？
我已经调试过了，问题是material.init() get 在任何渲染之前被调用（所以实例初始化器可能调用得太早）并且init() 没有效果。
每当我使用上面提供的初始化程序时，我都会收到Uncaught TypeError: Cannot read property 'init' of undefined。我用 npm 安装了这个包，还有什么需要做的吗？

【解决方案2】：

我使用 Ember 2.12.01 的解决方案是将 $.material.init(); 包装在一个函数中

var initMD = function() {
    $(document).ready(function(){
        $.material.init();
    })
}

并在我的路由器中使用didTransition 操作调用此函数

export default Ember.Route.extend({
    actions: {
        didTransition() {
            initTheme();
            return true; // Bubble the didTransition event
        }
    },
    [...]
}

【讨论】：