ember.js 中自定义输入字段的最佳实践

Question

我想在 ember.js 中设置我的输入字段的样式，如下所示： http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

它不仅仅是输入框，还伴随着：

每个输入字段的附加跨度和标签标记，并且
一个通用的小型自定义 js 部分，负责视觉效果

<span class="input input--haruki">
        <input class="input__field input__field--haruki" type="text" id="input-1" />
    <label class="input__label input__label--haruki" for="input-1">
        <span class="input__label-content input__label-content--haruki">First Name</span>
    </label>
</span>

为了方便重复使用，有什么好的包装方法？您是否建议将其放入 ember 组件中？

谢谢，曼纽尔

Answer 1

一个好的开始可能是实现一个组件如下：

App.CoolTextfieldComponent = Ember.Component.extend({
  tagName: 'span',
  classNames: ["input", "input--haruki"],
  idValue: null, 
  label: null
});

组件模板如下：

<script type="text/x-handlebars" id="components/cool-textfield">

  {{ input type="text" id=idValue class="input__field input__field--haruki" value=value}}

  <label class="input__label input__label--haruki" {{ bind-attr for=idValue }}>
    <span class="input__label-content input__label-content--haruki">{{ label }}</span>
  </label>

</script>

这可以在您的模板中使用，如下所示：

{{ cool-textfield idValue="input-1" label="First Name" value=name}}

工作示例here

ember.js 中自定义输入字段的最佳实践

Best practice for custom input fields in ember.js

javascript

input

ember.js