如何在Embers Handlebars {{input}}帮助器上设置“样式”属性？

Question

我尝试在我的视图模板中使用{{input style="width:100%"}}但没有任何成功。

浏览器固执地呈现<input>而没有style="width:100%;"。 我怎样才能实现它？

供将来参考，以下是基于@damienc答案的我的决议（针对Ember-Cli）：

组件类

//app/components/forms/elements/style-input.js
import Ember from "ember";
export default Ember.TextField.extend({
    attributeBindings: ['style'],
    styleAttrib      : null,
    style: Ember.computed({
        get: function () {
            return Ember.String.htmlSafe(this.get('styleAttrib'));
        },
        set: function (key, newStyle) {
            this.set('styleAttrib', newStyle);
            return Ember.String.htmlSafe(newStyle);
        }
    })
});

和模板：

{{!app/templates/components/portlet-datatable/header-cell-filterable.hbs}}
<div class="ember-table-content-container">
      <span class="ember-table-content">
        {{forms/elements/style-input type="text"
        placeholder=view.content.headerCellName style="width: 100%;"}}
      </span>
</div>

Answer 1

input帮助程序不支持开箱即用。

您可以添加与CSS规则匹配的class参数，也可以实现自己的输入助手，将style添加到组件的attributeBindings属性中。

这个旧的食谱条目通过扩展Ember.TextField类来实现一些特定的行为： http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/