Question

我正在使用Ember制作一个玩具库跟踪应用程序。我正在重构一些代码，这个sendAction出现了。 sendAction的高级目的是什么？它是否会导致更清晰的代码？我已经阅读了this。

很抱歉，如果Ember问题需要阅读很多必备代码。我认为这些是相关文件。

快速注意，我有一个libraries.new路由，它加载routes / libraries / new.js文件，该文件有一个渲染表单模板的renderTemplate方法（这个表单模板用于几个不同的区域，所以这会干掉我的码）。由于我的路由处理程序有一个渲染库/表单的renderTemplate函数，这是我的库/表单模板：

<h2>{{title}}</h2>

<div class="row">
    <div class="col-md-6">
      {{library-item-form item=model buttonLabel=buttonLabel action='saveLibrary'}}
    </div>

    <div class="col-md-4">
      {{#library-item item=model}}
        <br/>
      {{/library-item}}
    </div>

</div>

问题：

library-item-form组件行有一个动作（这叫做什么？是属性吗？）属性，它被传递给了＆＃39; saveLibrary＆＃39;来自其上下文的动作（库/新路由处理程序对吗？）
由于这是组件的传入操作，因此当在button-item-form组件中调用buttonClicked方法时调用的操作是因为buttonClicked方法调用sendAction？

这是我的library-item-form组件js文件：

import Ember from 'ember';

export default Ember.Component.extend({
  buttonLabel: 'Save',

  actions: {

    buttonClicked(param) {
      this.sendAction('action', param);
    }

  }
});

这是library-item-form.hbs的组件模板。它是一个带有提交按钮的3输入字段表单。提交按钮有一个名为buttonClicked的动作：

<div class="form-horizontal">
    <div class="form-group has-feedback {{if item.isValid 'has-success'}}">
        <label class="col-sm-2 control-label">Name*</label>
        <div class="col-sm-10">
          {{input type="text" value=item.name class="form-control" placeholder="The name of the Library"}}
          {{#if item.isValid}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Address</label>
        <div class="col-sm-10">
          {{input type="text" value=item.address class="form-control" placeholder="The address of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          {{input type="text" value=item.phone class="form-control" placeholder="The phone number of the Library"}}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" {{action 'buttonClicked' item}} disabled="{{unless item.isValid 'disabled'}}">{{buttonLabel}}</button>
        </div>
    </div>
</div>

哦，最后，这是带有saveLibrary操作的库/新路由处理程序：

import Ember from 'ember';

export default Ember.Route.extend({

  model: function () {
    return this.store.createRecord('library');
  },

  setupController: function (controller, model) {
    this._super(controller, model);

    controller.set('title', 'Create a new library');
    controller.set('buttonLabel', 'Create');
  },

  renderTemplate() {
    this.render('libraries/form');
  },

  actions: {

    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo('libraries'));
    },

    willTransition() {
      let model = this.controller.get('model');

      if (model.get('isNew')) {
        model.destroyRecord();
      }
    }
  }
});

上次提问

因此，在动作属性（saveLibrary）中传递给组件的任何动作都是正确的，这是在组件的js文件（components / library-item-form）时调用的动作。 js）调用一个调用sendAction函数的动作（buttonClicked）？
是否可以调用sendAction的第一个参数＆＃39; action＆＃39;？是否必须调用调用组件的行中的属性＆＃39; action？

Answer 1

sendAction的高级目的是什么？它会导致代码更清晰吗？

To send an action from a component to the parent context

快速注意，我有一个libraries.new路由，它加载routes / libraries / new.js文件，该文件有一个渲染表单模板的renderTemplate方法（这个表单模板用于几个不同的区域，所以这会干掉我的代码）

改为使其成为一个组件。这是一个更好的模式，因为你不必与renderTemplate混淆。

library-item-form组件行有一个动作（这叫做什么？它是属性吗？）属性，它通过了＆＃39; saveLibrary＆＃39;来自其上下文的动作（库/新路径处理程序对吗？）

从技术上讲，它是一个属性，因为它通过了它，但它通常只是一个动作。
上下文是libraries/new的控制器，而不是路由。然后，经典动作将[冒泡]活动路线的层次结构。

因为那是组件的传入操作，所以当在button-item-form组件中调用buttonClicked方法时调用的操作是因为buttonClicked方法调用sendAction？

是的，因为您正在指定action being sent is action。

所以说，在action属性（saveLibrary）中传递给组件的任何操作都是在组件的js文件（components / library-item-form.js）调用时调用的操作一个调用sendAction函数的动作（buttonClicked）？

不，如前一个答案所述，它只调用绑定到action属性的操作，因为您正在执行this.sendAction('action', …)。如果您执行this.sendAction('buttonClicked, …)，则会调用绑定到buttonClicked属性的操作。

是否可以调用sendAction的第一个参数＆＃39; action＆＃39;？是否必须调用调用组件的行中的属性＆＃39; action？

没有。操作可以是named semantically。

正如@torazaburo所提到的，这是在指南中记录的，尽管在以前的版本中情况就是这样，因为在v1.13.0及以上，引入了一种新的动作，它具有明显更好的开发人员工效学，并且更新了指南以反映这是最佳实践。我建议你给Triggering Changes with Actions一个好的阅读并尝试相应地更新你的申请，因为你刚开始（根据我的理解）。

Ember.js。 sendAction的目的是什么？它是如何工作的？它只是导致代码更清晰吗？

1 个答案: