jquery - 如何监听操作中的点击 - emberjs 最佳实践

Question

我最近开始学习 emberjs，并且正在努力了解不同组件如何相互交互，以及做事的最佳实践。

我想要做的是使用 ember 提供的类绑定(bind)来重现以下粗略的 jquery 功能:

import Ember from "ember";

export default Ember.Component.extend({
    actions: {
        showMenu: function() {
            $('.menu-bar').removeClass('hideMenu');
            $('.menu-bar').addClass('showMenu');

        $('.page').click(function() {
            $('.menu-bar').removeClass('showMenu');
            $('.menu-bar').addClass('hideMenu');
        });
    }
}
});

到目前为止我所做的是:

import Ember from "ember";

export default Ember.Component.extend({
    showMenu: false,
    actions: {
        showMenu: function() {
            this.set('showMenu', true);
        }
    }
});

我的菜单栏组件如下所示:

<div {{bind-attr class=":menu-bar showMenu:menuSlideDown:menuSlideUp"}} {{action 'showMenu'}}>
</div>

最后我的模板被加载到 {{outlet}} 中，如下所示:

<div {{bind-attr class=":page :home :current"}}>
    {{menu-bar}}
    <div class="splash center button-perspective">
    </div>
</div>

我想知道所需功能的“最佳实践”。另请注意，我正在使用 ember-cli。

我可以在元素“page”上添加一个 {{action}} 监听器，但我有多个带有“page”类的模板，因此必须将此监听器添加到所有页面 - 这也意味着它将触发每个单击时间页面对我来说感觉很脏。我想处理属于菜单栏 Controller 内的 menu-bar.js 组件的所有操作。这是合理的逻辑吗？如果是\否，最好的方法是什么？

如果需要更多信息，我很乐意提供 - 也欢迎任何和所有批评。

Answer 1

这可以是实现该功能的示例

//In any view template, consider custom-form as a component
{{custom-form dataSet=model.data action='submitForm'}}

//In custom-form.hbs
<div class="container">
    <div class="header">
    <span>Form</span>   
    {{#if isExpanded}}
        <span class="arrow"{{action "toggleExpanded"}}><i class="glyphicon glyphicon-triangle-bottom"></i></span>
    {{else}}
        <span class="arrow" {{action "toggleExpanded"}}><i class="glyphicon glyphicon-triangle-top"></i></span>
    {{/if}} 
    </div>  
    {{#if isExpanded}}
        {{#each qObj in dataSet}}
        <div class="form-group">
            <label>{{qObj.question}}</label>
            {{input value=qObj}}
        </div>
        {{/each}}
    {{/if}}
    <button {{action 'submitForm'}}>Submit</button>
</div>

//In custom-form.js
import Ember from 'ember';
import layout from '../templates/components/custom-form';

export default Ember.Component.extend({
  layout: layout,
  isExpanded:true,
  actions:{
    submitForm:function(){
        this.sendAction(); //This will send action to outside application
    },
    toggleExpanded:function(){
        this.toggleProperty('isExpanded');
    }
  }
});


//In any controller which is the context of component
import Ember from 'ember';

export default Ember.Controller.extend({
    actions:{
        submitForm:function(){
            alert('From Controller');
            console.log(JSON.stringify(this.get('model.data')));
        }
    }
});

现在这里定义了action='submitForm'，如果您想在组件操作的基础上处理某些特定功能，则该方法名称可以是您将在 Controller 中实现的任何名称。 组件的正常操作将仅在组件内部处理，例如 'toggleExpanded' 和 'submitForm' 。现在要将操作从组件发送到应用程序，请使用 sendAction 方法。

现在与组件相关的文件将仅位于 templates/componets/.hbs 和 Components/.js