1

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

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

4

4 回答 4

6

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);
于 2015-07-18T16:08:38.840 回答
1

或者您可以只在 didInsertElement 上执行 componentHandler.upgradeDom()。根据他们的文档

在现有 DOM 中搜索我们组件类型的元素并升级它们 * 如果它们尚未升级。

initializeItems: function () {
    componentHandler.upgradeDom();
}.on('didInsertElement')
于 2016-07-06T12:06:21.593 回答
1

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

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

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

这很简单。

ember install ember-mdl

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

实现示例在虚拟应用程序中

于 2015-12-30T14:12:54.423 回答
0

感谢@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' 
}}
于 2015-07-19T11:40:54.667 回答