I would like to style my input fields in ember.js like this: http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

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

It is not just the input field, but is accompanied also by:

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

• additional span and label tags for every input field and
• 每个输入字段和附加的span和label标签
• a general small custom js section that is taking care for visual 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>

What is a good way to wrap this for a convenient re-use? Do you recommend putting this into an ember component?

为方便重复使用包裹它的好方法是什么？你建议把它放入一个余烬组件吗？

Thank you, Manuel

谢谢你，曼努埃尔

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>