EmberJsコンポーネントからajax呼び出しを行う正しい方法ですか？

Question

私はemberコンポーネントからajax呼び出しを行う正しい方法が何であるか知っています。たとえば

私は従業員のIDで従業員を検索する再利用可能なコンポーネントを作成したいのですが、その応答がサーバーから返ってくると、モデルをajaxレスポンスのデータで更新したいと考えています。

これが正しい方法であるかどうかわかりませんが、私はemberjsで本当に新しいです。 BEと通信するために、この

actions: { 
    doSomething() { 
    Ember.$.post('http://your-api-endpoint', data).then(function(response){ /* your callback code */}); 
    } 
} 

そして、他の方法は、（あなたが言ったように）、その後のルートであなたが得ることができるエンバーストアを使用することであるようにそれが見えたので、私はアクションで直接エンバークラスを使用していた

export default Ember.Component.extend({ 
ajax: Ember.inject.service(), 
actions: { 
    doSearch() { 
     showLoadingData(); 
     var self = this; 
     this.get('ajax').post('http://server.ip.com/api/v1/getEmployee', { "id": this }).then(function(data) { 
      self.set('model.name', data.name); 
      self.set('model.position', data.position); 
      hideLoadingData(); 
     }); 
    } 
}}); 

Answer 1

EDITからモデル私の答えの日付バージョン：

まず、ember-dataを使うべきだと思います。従業員をIDで取得すると、this.get("store").find("employee", id)が呼び出されます。

plain ajaxを使用する場合は、仕様（APIエンドポイントURL、データ形式など）をカプセル化し、モデルの検索と更新のための簡単な方法を公開するServiceを作成することをお勧めします。

最後に、「データダウン、アクションアップ」パターンに従うために、このコンポーネントでモデルを更新しないでください。代わりに、親コントローラ/コンポーネントにアクションを送信します。

app/components/employee-selector.js（あなたが書いているコンポーネント）：

export default Ember.Component.extend({ 
    actions: { 
    updateId(id) { 
     Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then((response) => { 
     this.sendAction("select", response); 
    }); 
    } 
}); 

app/templates/new/it-request.hbs：

{{employee-selector select=(action "selectEmployee")}} 

app/controllers/new/it-request.js：

export default Ember.Controller.extend({ 
    actions: { 
    selectEmployee(employeeData) { 
     this.set("model.name", employeeData.name); 
     this.set("model.position", employeeData.name); 
    } 
    } 
}); 

旧答え：

ので、同様3210

慣用的な解決策はRouteでこれを行うことです。

まず、app/router.jsにルートを追加する必要がありますapp/employees/show/route.jsでルートを定義するより

this.route("employees", function() { 
    this.route("show", { path: ":id" }); 
} 

を：

import Ember from "ember"; 

export default Ember.Route.extend({ 
    model(params) { 
    return new Ember.RSVP.Promise((resolve, reject) { 
     Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then(
     (response) => { resolve(response) }, 
     reject 
    ); 
    }); 
    } 
}); 

（私は新しい約束のすべてを包んだ唯一の理由は、応答のカスタマイズを可能にすることです - resolve(response)を、サーバーからの生の応答を変換し、resolveをこの変換されたバージョンで呼び出すコードに置き換えてください）。

APIとのコミュニケーションが増えたら、ember-dataや他のデータレイヤライブラリ（おそらくOrbit）を使ってみることをお勧めします。

少なくとも、APIとのすべての通信を抽象化し、生のajaxリクエストを使用する任意の場所で使用するserviceを作成します。

Answer 2

私はここに、質問を誤解アップだ：

例BE

App.PressRoute = Ember.Route.extend({ 
    route: "press", 
    controllerName: 'press', 
    model: function(params) { 
     var controller = this.controllerFor("Press"); 

     if(controller.get("loaded") == false) { 
      controller.set("loaded",true); 
      return this.store.find('Article',{limit: 200}); 
     } 
     else return this.store.all('Article'); 
    }, 
    renderTemplate: function() { 
     this.render('press'); 
    } 
}); 

Answer 3

これを行う方法はいくつかあります。

まず、EmberにはjQueryのaliasがあります。Ember.$です。したがって、使い慣れたjQueryの場合、これは十分に簡単であるはずです。

EmberのRSVPパッケージを使用することもできます。要求を行い、応答で何かを行う方法については、good example hereがあります。

第3に、ember-ajaxサービスが可能です。

しかし、Ember Dataには、（ajaxレスポンスのデータでモデルを更新する）ことが既に組み込まれています。アダプタとシリアライザのどちらかであなたのAPIをマップする必要があります。 Emberが期待しているサービスにサービスが変換されたら、query your server for a single recordを保存してください。