Ember.jsのデータダウンアクションパターンを実装するためにsendAction（）を使用する

Question

私はEmber.jsを試してみるために少しのアプリをやっていますが、私はデータダウンアクションの実装に本当に苦労しています。アップコンポーネント。何らかの理由で、私はルータに適切にアクションを「送信」できないようです。私がそれをしたいときにコンポーネントアクションがトリガーされますが、sendAction()は何もしていないようです。

私のコードは、以下である：

マイコンポーネント（編集-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); 
    } 
    } 
}); 

マイコンポーネントテンプレート（編集-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

アクション名が文字列として渡される必要がありますので、あなたは、古典的なアクションを使用しています。したがって、このトリックminimum sample

とひねり作成し{{editable-cell startingText=book.title action='saveBook'}}

を行います見ember component send action to route答え