Question

在我的应用程序中，我有一个扩展的Em.Select视图：

App.SelectField = Em.Select.extend({
    attributeBindings: ['disabled'],
    actions: {
        setFocus: function(){
            this.$().focus();
        }
    }
});

我的车把模板中使用了哪个：

{{view App.SelectField 
    viewName="cbAddressType"
    disabledBinding='getIsDisabled'
    contentBinding="controllers.addressTypes"
    optionValuePath="content.id"
    optionLabelPath="content.addressTypeName"
    valueBinding="getSetAddressType"}}

视图的disabledBinding绑定到视图的控制器属性getIsDisabled。此属性更改时，将启用或禁用“选择”视图。这很好用。

但是，我也对模板采取了措施：

<button {{action "editRecord" view.cbAddressType}}>Edit</button>

这会调用控制器的editRecord操作：

actions: {
    editRecord: function (fieldToFocusOn) {
            this.toggleProperty('isEditing');
            if (fieldToFocusOn  && this.get('isEditing'))
            {
                fieldToFocusOn.send("setFocus");
            }
    }
}

将setFocus操作发送到上述SelectField，然后在选择控件上运行focus()方法。

问题是，在使用绑定属性在控制器中更改的值更新Select的focus()属性之前，disabledBinding被触发。在启用之前，控件无法获得焦点。我尝试了一个while select.disabled [wait] loop，但这导致了一个无限循环，因为看起来直到调用setFocus之后视图才会刷新 - 它们不是异步运行的。

我还注意到，在Ember.TextField上使用readonlyBinding而不是disabledBinding时，此方法可以正常工作：文本字段的readonly属性在focus（）事件被触发。

感谢任何建议。

Answer 1

未经测试但可行。在App.SelectField使用中：

setFocus: function(){
  Ember.run.schedule('afterRender', this, function() {
    this.$().focus();
  });
}

focus（）on Ember更新disabledBinding属性之前触发的Select字段

1 个答案: