javascript - 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