Ember.js应用程序中的材质设计精简输入在路径转换后失去设计

Question

我正在尝试将Material Design lite与Ember.js应用程序一起使用,并使表单以某种方式工作.但是,当用户从一个页面导航到包含表单或输入的另一个页面时,输入似乎没有按预期运行.对于此处的示例,当页面首次加载到主页时,输入工作正常,但是当我们在登录页面和主页面之间切换时,输入回退到基本形式和材料设计动画将丢失.

不确定这个问题是否与Ember.js或Material设计有关,但是我们非常感谢任何帮助.

Answer 1

MDL需要初始化元素以获得特殊效果,例如带有涟漪的按钮或动画输入框.默认情况下,它们在页面加载时初始化,但不会初始化由视图或组件插入的元素.最简单的方法是初始化它们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);