Question

我最近开始学习emberjs，并且正在努力了解不同组件之间的互动方式，以及做事的最佳实践。

我要做的是使用类绑定ember提供来重现以下粗略的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>

我想知道＆＃34;最佳做法＆＃34;用于所需的功能。另请注意我使用的是ember-cli。

我可以在元素＆＃39;页面上添加{{action}}侦听器。但我有多个模板与＆＃39;页面＆＃39; class和so必须将这个监听器添加到所有页面 - 这也意味着每次点击页面时它都会触发，这对我来说很脏。我想在菜单栏的控制器中处理属于我的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 =＆＃39; submitForm＆＃39;如果要在组件操作的基础上处理某些特定功能，则此方法名称可以是您将在控制器中实现的任何名称。组件的正常操作仅在组件内处理，如'toggleExpanded'和'submitForm'。现在要将组件中的操作发送到应用程序，请使用sendAction方法。

现在与组件相关的文件只能在templates / componets / .hbs和components / .js

中

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

1 个答案: