Ember.js 应用程序中的 Material Design lite 输入在路由转换后失去了设计答案

【问题标题】：Material design lite inputs in Ember.js app loses it design after route transitionEmber.js 应用程序中的 Material Design lite 输入在路由转换后失去了设计
【发布时间】：2015-07-18 14:17:55
【问题描述】：

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

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

【问题讨论】：

标签： html ember.js material-design-lite

【解决方案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);

【讨论】：

【解决方案2】：

您需要创建处理程序来为每个 MDL 组件初始化所需的 JS。你有两种可能：

使用 MDL 附带的 JavaScript，尽管它在某些组件上会变得很麻烦。
在每个组件上自己实现 JS，并在 MDL 内部使用 JS 的思想。

我使用了 2。这就是为什么我专门编写了一个 ember-addon 来从 MDL 中创建 ember 组件。

这很简单。

ember install ember-mdl

演示/文档：http://peec.github.io/ember-mdl/

实现示例在dummy app

【讨论】：

【解决方案3】：

或者你可以在 didInsertElement 上执行 componentHandler.upgradeDom()。基于他们的文档

在现有 DOM 中搜索我们组件类型的元素并进行升级他们 * 如果他们还没有升级。

initializeItems: function () {
    componentHandler.upgradeDom();
}.on('didInsertElement')

【讨论】：

想出了一个非常相似的解决方案。在您的 Ember 组件中创建 didInsertElement 函数。在其中只调用componentHandler.upgradeElements、componentHandler.upgradeElement 或componentHandler.upgradeDom。 export default Ember.Component.extend({ didInsertElement() { var textFields = this.$('.mdl-textfield').get(); componentHandler.upgradeElements(textFields); } });

【解决方案4】：

感谢@torazaburo 的建议。我必须修改 mixin 才能让它工作。就我而言，我有文本字段输入，需要修改混合。如果有人仍然需要，这是我的解决方案。

// app/mixins/textfield-support.js
import Ember from 'ember';

export default Ember.Mixin.create({
  initializeMdlTextfield: function() {
     componentHandler.upgradeElement(this.get('element'), 'MaterialTextfield');
  }.on('didInsertElement')
});

然后我们可以在我们的组件中扩展混合，如下所示。

// app/components/mdl-textfield-input.js
import Ember from 'ember';
import layout from '../templates/components/mdl-textfield-input';
import mdlTextfield from '../mixins/textfield-support';

export default Ember.Component.extend(mdlTextfield, {
    tagName             : 'div',
    attributeBindings   : ['disabled', 'type', 'name' ],
    hasFloatingLabel    : false,
    containerClassNames : '',
    labelText           : null,
    classNames          : ['mdl-textfield', 'mdl-js-textfield'],

    classNameBindings: [
        'hasFloatingLabel:mdl-textfield--floating-label',
        'containerClassNames'
    ],

    layout
});

组件模板看起来像这样。

// app/templates/components/mdl-textfield-input.hbs
{{yield}}
{{input id=name value=value type=type disabled=disable classNames="mdl-textfield__input"}}
<label class="mdl-textfield__label" for={{name}}>{{labelText}}</label>
<span class="mdl-textfield__error">{{error}}</span>

并如下使用此组件。

{{mdl-textfield-input 
    name='username' 
    value=model.username 
    labelText='Username'  
    hasFloatingLabel=true 
    type='text'
    containerClassNames ='mdl-cell--12-col' 
}}

【讨论】：

很高兴听到您解决了它。如果不是太麻烦，请投票/接受我的回答。