html - Ember.js 应用程序中的 Material design lite 输入在路由转换后丢失了它的设计

Question

我正在尝试使用 Material design lite使用 Ember.js 应用程序并使表单以某种方式工作。但是，当用户从一个页面导航到另一个包含表单或输入的页面时，输入的行为似乎并不像预期的那样。对于 an example here ，当页面第一次加载到主页时，输入工作正常，但是当我们在登录页面和主页之间切换时，输入回退到基本形式并且 Material 设计动画丢失。

不确定此问题是否与 Ember.js 或 Material 设计有关，但我们将不胜感激任何帮助。

Answer 1

MDL 要求对元素进行初始化以获得特殊效果，例如带波纹的按钮或动画输入框。它们默认在页面加载时初始化，但不会初始化 View 或组件插入的元素。最简单的方法是在 didInsertElement 上初始化它们。

一个更通用的方法是一个 mixin 来为你处理这个，如:

// mixins/mdl-button.js
export default Ember.Mixin.create() {
  initializeMdlButtons: function() {

    var buttons = this.get('element').querySelectorAll('.mdl-button');
    [].forEach.call(buttons, button => componentHandler.upgradeElement(button));

  }.on('didInsertElement')

然后在你的组件中使用按钮

import MdlButton from 'app/mixins/mdl-button';

export default Ember.Component.extend(MdlButton, {
  ...
});

或者，您可以将其应用于所有组件

Ember.Component.reopen(MdlButton);