Ember.js。 sendAction的目的是什麼？它是如何工作的？它只是導致更乾淨的代碼？

Question

我正在使用Ember製作玩具庫跟蹤應用程序。我正在重構一些代碼，並且這個sendAction出現了。 sendAction的高級用途是什麼？它是否導致更乾淨的代碼？我已經閱讀this。

對不起，如果Ember的問題有很多必要的代碼來閱讀。我認爲這些是這裏的相關文件。

快速注意，我有一個libraries.new路線，它加載了具有renderTemplate方法的路徑/庫/ new.js文件，該方法呈現一個表單模板（這個表單模板用於幾個不同的區域，所以這個DRYs up我的代碼）。由於我的路由處理有呈現庫/形式的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> 

問題：

1. 庫項目形成分線有動作（這是什麼叫做？它是一個屬性？）屬性從它的上下文（庫/新的路由處理程序？）中通過'saveLibrary'操作
2. 因爲這是組件的傳入操作，那就是當buttonClicked方法得到時被調用的動作由於buttonClicked方法調用sendAction，所以在庫項目表單組件中調用？

這是我的圖書館項目形成分js文件：

import Ember from 'ember'; 

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

    actions: { 

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

    } 
}); 

這裏是我的圖書館項目，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的第一個參數是否被稱爲'action'？調用組件的行中的屬性是否必須被稱爲「操作」？

Answer 1

sendAction的高級別目的是什麼？它是否導致更乾淨的代碼？

To send an action from a component to the parent context。

快速注意，我有一個libraries.new路線加載路由/庫/新。js文件，該文件具有呈現表單模板的renderTemplate方法（此表單模板用於幾個不同的區域，因此這會干擾我的代碼）

改爲使其成爲組件。這是一個更好的模式，因爲您不必與renderTemplate混淆。

庫項目表單組件行有一個操作（這是什麼叫？是一個屬性？）屬性從它的上下文（庫/新的路由處理程序對嗎？）傳遞'saveLibrary' ）

從技術上講，它是一個屬性，因爲它通過它，但它通常只是稱爲一個動作。
上下文是libraries/new的控制器，而不是路由。然後，經典動作會使活動路線的層次結構[泡沫化]。

既然這是組件的傳入操作，那是因爲buttonClicked方法調用sendAction而在button-item-form組件中調用buttonClicked方法時調用的操作？

是的，因爲您指定的是action being sent is action。

因此，正確地說，任何行動被傳遞到action屬性（saveLibrary）的成分是被調用時的動作組件的js文件（組件/庫項目 - form.js）調用的操作（buttonClicked）調用sendAction函數？

不，如前面的回答中所述，它只會調用綁定到action屬性的動作，因爲您在做this.sendAction('action', …)。
如果您做了this.sendAction('buttonClicked, …)，它會調用綁定到buttonClicked屬性的操作。

sendAction的第一個參數是否被稱爲'action'？調用組件的行中的屬性是否必須被稱爲「操作」？

編號操作可以是named semantically。

正如@torazaburo提到的，這是記錄在指南，儘管在以前的版本。
這是因爲在v1.13.0及以上者，一種新的動作引入有顯著更好的開發人體工程學和指南進行了更新，以反映作爲最佳實踐的情況。我建議你給Triggering Changes with Actions一個很好的閱讀，並嘗試相應地更新你的應用程序，因爲你剛剛開始（從我的理解）。