在 Ember.js 应用程序中初始化 Bootstrap Material 设计

Question

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

$.material.init()

我试图创建一个实例初始化程序并将这段代码放入其中，但没有任何反应。

谁能帮我初始化 Ember 应用程序中的 material 效果？

Answer 1

我找到了答案。根据 Ember 文档，我们可以使用一个 Application Instance Initializer，它可以在我们的应用程序加载时运行编码。

Application instance initializers are run as an application instance is loaded. They provide a way to configure the initial state of your application, as well as to set up dependency injections that are local to the application instance (e.g. A/B testing confurations).

所以，我刚刚使用 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
};

这就是我为让它正常工作所做的一切。希望对你有帮助。

Answer 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
        }
    },
    [...]
}

在 Ember.js 应用程序中初始化 Bootstrap Material 设计

initialize Bootstrap Material Design in Ember.js App

javascript

ember.js

material-design

ember-cli

bootstrap-material-design