zoukankan      html  css  js  c++  java
  • 5.7 Components — Sending Actions From Components to Your Application

    一、概述

    1. 当一个组件在模板中被使用时,它具有发送action到这个模板的controller和routes的能力。当重大事件发生的时候,这些允许组件通知application,比如点击组件一个特殊的元素。

    2. 像{{action}}Handlebars辅助器,来自组件的actions首先会去到模板的controller。如果controller没有为这个action实现一个处理程序,它将会冒泡到模板的route,然后上升到路由层次。要知道更多的关于冒泡行为的信息,请看Action Budding

    3. 组件被设计为在你的应用程序的不同部分可重用的。为了达到这个重用性,这是很重要的,当组件被用在模板中时,被你的组件发送的actions可以被定制。

    4.换句话说,如果你在编写一个按钮组件,你不想发送一个click action,因为它是含糊不清的并且可能与页面上的其他组件冲突。相反,当你的按钮被点击时,你会希望允许他人使用组件去指定发送哪一个action。

    5.幸运的是,组件有一个sendAction()方法,当一个组件被用在一个模板中时,它允许它们发送指定的actions。

    二、Sending a primary action

    1. 许多组件仅仅发送一类action。例如,一个按钮组件当被点击时可能发送一个action,这个就是primary action

    2. 为了设置一个组件的primary action,在Handlebars中设置它的action属性:

    {{my-button action="showUser"}}

    这就告诉my-button组件,当触发它的primary action时它应该发送showUser action

    3. 那么你如何触发发送一个组件primary action的操作呢?在相关的事件发生之后,你可以不含参数的调用sendAction()方法:

    app/components/my-button.js

    export default Ember.Component.extend({
      click() {
        this.sendAction();
      }
    });

    在上面例子中,当这个组件被点击的时候,my-button组件将会发送showUser action

    三、Sending parameters with an action

    1. 你可能希望为route或者controller提供额外的上下文来处理一个action。例如,一个按钮组件可能希望告诉一个controller不仅一条数据被删除了,而且还有其他的。

    2. 为了使用primary action发送参数,调用sendAction()附加一个'action'字符串作为第一个参数并且其他多余的参数紧随其后:

    this.sendAction('action', param1, param2);

    例如,假象我们正在创建一个todo list,允许用户删除一个todo:

    app/routes/index.js

    export default Ember.Route.extend({
      model() {
        return {
          todos: [{
            title: "Learn Ember.js"
          }, {
            title: "Walk the dog"
          }]
        };
      },
    
      actions: {
        deleteTodo(todo) {
          var todos = this.modelFor('index').todos;
          todos.removeObject(todo);
        }
      }
    });

    app/templates/index.hbs

    {{#each model.todos as |todo|}}
      <p>{{todo.title}} <button {{action "deleteTodo" todo}}>Delete</button></p>
    {{/each}}

    3. 我们希望更新这个app,所以在真正删除一个todo之间,用户必须确认这就是它们的打算。我们将实现一个组件在完成action之前首先和用户二次检查。

    在这个组件中,我们触发primary action,我们将传送一个组件的用户指定的额外参数:

    app/components/confirm-button.js

    export default Ember.Component.extend({
      actions: {
        showConfirmation() {
          this.toggleProperty('isShowingConfirmation');
        },
    
        confirm() {
          this.toggleProperty('isShowingConfirmation');
          this.sendAction('action', this.get('param'));
        }
      }
    });

    app/templates/components/confirm-button.hbs

    {{#if isShowingConfirmation}}
      <button {{action "confirm"}}>Click again to confirm</button>
    {{else}}
      <button {{action "showConfirmation"}}>{{title}}</button>
    {{/if}}

    现在我们可以更新我们最初的模板并且用我们的新组建替换{{action}}

    4. 注意,我们已经通过设置组件的action属性来发送指定的action,并且我们已经通过设置组件的param属性指定了哪一个argument应该被作为参数被传送。

    四、Sending multipe actions

    1. 根据你的组件的复杂性,你可能需要让用户为你的组件生成的不同的事件指定多个不同的actions。例如,假设你正在编写一个form组件,用户可以提交或者取消。根据用户点击哪一个按钮,你希望发送不同的aciton到你的controller或者route。

    2. 你可以通过把事件的名字作为第一个参数传递给sendAction()来指定哪一个action被传送。

    {{user-form submit="createUser" cancel="cancelUserCreation"}}

    在这种情况下,你可以通过this.sendAction('submit')发送createUser action,或者通过调用this.sendAction('cancel')发送cancelUserCreation action

    五、Actions that aren't specified

    如果用户使用你的组件没有为一个特殊的事件指定一个action,调用sendAction()将毫无影响。例如,你定义一个组件当点击的时候触发primary action:

    app/components/my-button.js

    export default Ember.Component.extend({
      click() {
        this.sendAction();
      }
    });

    如果用户点击它,使用这个组件不委派一个primary action将会没有任何反应。

    {{my-button}}

    六、Thinking about component actions

    1. 一般情况下,你应该考虑组件的actions作为转换一个primitive event(原始事件)(例如鼠标点击或者一个<audio>元素的暂停事件)为应用程序中有意义的actions。

    2. 这允许你的routes和controllers去实现actions处理器,用类似这样的名字deleteTodo或者songDidPause而不是模糊的名字类似clike或者pause,对其他开发者来,当在上下文之外阅读代码,这种名字可能是模糊的。

    3. 另一种考虑组件actions的途径是作为你的组件的公共API。考虑组件中的哪一个事件可以在其他应用程序中触发actions,这是其他开发者将使用你的组件的主要途径。一般来说,保持这些事件越通用越好,这会使组件更加灵活和可重用。

  • 相关阅读:
    将PHP文件生成静态文件源码
    Entity Framework Code First 学习日记(6)一对多关系
    Entity Framework Code First 学习日记(5)
    Entity Framework Code First 学习日记(3)
    Entity Framework Code First 学习日记(7)多对多关系
    Entity Framework Code First学习日记(2)
    Entity Framework Code First 学习日记(8)一对一关系
    Entity Framework Code First 学习日记(9)映射继承关系
    Entity Framework Code First 学习日记(10)兼容遗留数据库
    Entity Framework Code First 学习日记(4)
  • 原文地址:https://www.cnblogs.com/sunshineground/p/5164892.html
Copyright © 2011-2022 走看看