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

Posted 2023-02-26

【中文标题】Emberjs - 使用专注于自身的 Views/Handlebar Helpers 创建一个按钮

【英文标题】：Emberjs - Creating a button using Views/Handlebar Helpers that focuses on itself

【发布时间】：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

【参考方案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！我接受。