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>

为方便重复使用，有什么好方法可以包装它？你建议把它放入一个余烬组件吗？

谢谢你，曼努埃尔

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中自定义输入字段的最佳实践

1 个答案: