Emberjs - 使用专注于自身的 Views/Handlebar Helpers 创建一个按钮答案

【问题标题】：Emberjs - Creating a button using Views/Handlebar Helpers that focuses on itselfEmberjs - 使用专注于自身的 Views/Handlebar Helpers 创建一个按钮
【发布时间】：2014-04-17 14:22:08
【问题描述】：

我有一个 Handlebars 辅助视图，它使用 Em.Button（我知道它已被弃用）来制作一个 Deactivate Button，当按钮出现时，它会专注于自身。单击按钮会触发“删除”操作，而焦点输出使用操作“取消删除”

问题是，车把助手没有关闭 {{/ }} 车把，阻止我在按钮内放置文本，按钮最终只是一个空壳。 如何给这个按钮一个文本值？ 或者 有没有更简单的方法可以在没有 Em.Button 的情况下制作这个按钮？

绿色复选标记将转到使此按钮起作用的答案。

车把助手看起来像这样

{{delete-recordCategory class="" value=recordCategory focus-out="cancelDeactivate" insert-newline="cancelDeactivate"}}

在视图中，我添加了焦点并使用点击“停用”操作

VpcYeoman.DeleteRecordCategoryView = Em.Button.extend(Ember.ViewTargetActionSupport, {
  click: function() {
    this.triggerAction({
      action: 'deactivateCategoryNow'
    }); // Sends the `save` action, along with the current context
        // to the current controller
  },
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('delete-recordCategory', VpcYeoman.DeleteRecordCategoryView);

ember 网站建议将 Ember.ViewTargetActionSupport 作为向此视图添加操作的方式。

Ember v. 1.0

【问题讨论】：

标签： javascript jquery view ember.js handlebars.js

【解决方案1】：

Ember.Button 不仅已被弃用，而且已从较新版本中完全删除。绝对不是你想要保留的东西。尝试编写自己的。下面是一个可以做你想做的组件的简单示例：

App.FocusButtonComponent = Ember.Component.extend({
    didInsertElement: function() {
        Em.run.later(function() {
            this.$('button').focus();
        }.bind(this), 1);
    },

    actions: {
        click: function() {
            this.sendAction('click');
        }
    }
});

focus_button.hbs

<button {{action 'click' on='click' bubbles=false}}>
    {{yield}}
</button>

然后，你可以这样使用它：

{{focus-button click='deactivateCategoryNow'}}
    Text Goes Here. Could be anything. <strong>Anything.</strong>
{{/focus-button}}

【讨论】：

加一！这个很棒，它适用于ootb！我接受。