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

Question

I have a Handlebars helper view that uses Em.Button(I know it's deprecated) to make a Deactivate Button that focuses on itself when the button appears. Clicking the button triggers the 'delete' action and focus-out uses an action to 'cancelDelete'

The problem is that handlebar helpers do not have a closing {{ / }} handlebar, preventing me from putting an text inside of the button, the button just ends up being an empty shell. How do I give this button a text value? OR Is there an easier way of making this button without Em.Button?

The green check will go to the answer that makes this button work.

The handlebar helper looks like this

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

In the view is where i added the focus and the click 'deactivate' action using

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);

The ember site suggested Ember.ViewTargetActionSupport as the way to add actions to this view.

Ember v. 1.0

Answer 1

Ember.Button isn't just deprecated, it's been completely removed from newer versions. Definitely not something you want to keep around. Try writing your own. Here's a quick example of a component that might do what you want:

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>

Then, you could use it like this:

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