使用sendAction()在ember.js中实现数据降低操作模式

Question

我正在尝试一个小应用程序来尝试学习ember.js，但是我确实在实现数据减少actions-actions-up组件而苦苦挣扎。由于某种原因，我似乎无法正确地将动作发送回路由器。当我希望它成为时，会触发组件操作，但是sendAction()似乎没有做任何事情。

我的代码如下：

我的组件（editable-cell.js）：

import Ember from 'ember';
export default Ember.Component.extend({
  isEditing: false,
  startingText: "",
  saveAction: null,
  asdf: 'asdf jkl;',
  actions: {
    edit() {
      this.set('isEditing', true);
    },
    cancelEdit() {
      this.set('isEditing', false);
    },
    save() {
      console.log("SAVE");
      // I'm using the 'asdf' property just as a placeholder for now to get it working.
      this.sendAction('action', this.get('asdf'));
      this.set('isEditing', false);
    }
  }
});

我的组件模板（Editable-cell.hbs）：

<td>
  {{#if isEditing}}
    <form {{action 'saveAction' "Test Text" on='submit'}} class="form-inline">
      <div class="input-group">
        <input class="form-control" value="{{startingText}}">
        <div class="input-group-btn">
          <button type="submit" class="btn btn-success" {{action 'save'}}>Save</button>
          <button class="btn btn-danger" {{action 'cancelEdit'}}>Cancel</button>
        </div>
      </div>
    </form>
  {{else}}
    <span {{action 'edit'}}>{{startingText}}</span>
  {{/if}}
</td>

我的模板（books.hbs）：

<h1>Books</h1>
<table class="table table-bordered table-striped">
  <thead>
  <tr>
    <th>
      Title
      <br><small class="small not-bold">(Click on name for editing)</small>
    </th>
    <th class="vtop">Author</th>
    <th class="vtop">Release Year</th>
    <th class="vtop">Library</th>
  </tr>
  </thead>
  <tbody>
  {{#each model as |book|}}
    <tr>
      <td>
        {{editable-cell startingText=book.title action=saveBook}}
      </td>
      <td>{{book.author.name}}</td>
      <td>{{book.releaseYear}}</td>
      <td>{{book.library.name}}</td>
    </tr>
  {{/each}}
  </tbody>
</table>

路由器（books.js）：

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return this.store.findAll('book');
  },
  actions: {
    saveBook: function(book) {
      console.log("In the book controller");
      console.log(book);
      book.save();
    }
  }
});

控制器（books.js）：

import Ember from 'ember';
export default Ember.Controller.extend({
});

Answer 1

您正在使用经典动作，因此应将动作名称作为字符串传递。因此，这将执行技巧{{editable-cell startingText=book.title action='saveBook'}}

创建了用最小样品

创建的twiddle

请查看Ember组件发送操作以路由答案