Using sendAction() implement data down actions up in Ember.js

I'm doing a little app to try and learn Ember, but I'm really struggling with the implementation of a data-down-actions-up component. For some reason I don't seem to be able to 'send' an action back up to the router properly. My code is below:

My Component (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");

      this.sendAction('action', this.get('asdf'));
      this.set('isEditing', false);
    }
  }
});

My Component Template (editable-cell.hbs):

<td>
  
    <form  class="form-inline">
      <div class="input-group">
        <input class="form-control" value="">
        <div class="input-group-btn">
          <button type="submit" class="btn btn-success" >Save</button>
          <button class="btn btn-danger" >Cancel</button>
        </div>
      </div>
    </form>

  
    <span ></span>
  
</td>

My Template (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>
  
    <tr>
      <td>
        
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  
  </tbody>
</table>

The Router (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();
    }
  }
});

The Controller (books.js):

import Ember from 'ember';

export default Ember.Controller.extend({
});