ember.js - 如何在 Embers Handlebars {{input}} 助手上设置 "style"属性？

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/