0

これが私がやろうとしていることです：

  1. PHP スクリプトから JSON データを取得する ajax リクエストを作成する
  2. その情報を DataStore モデルに挿入します
  3. これらのモデルをコントローラー内に保存する
  4. handlebars テンプレートで {{#each}} を使用して情報を表示します

  • ember-data には、データを取得する方法が組み込まれていますか? そうでない場合、AJAX リクエストはどこに実装する必要がありますか?

  • JSON データを DS モデルに挿入する最良の方法は何ですか?

  • モデルをコントローラーと同期する最良の方法は何ですか?

4 つの手順をすべて実装する例も、見つけられないように見えるので、非常に役立ちます。

4

2 に答える 2

2

AJAX リクエストの作成

// Find all pets.
var pets = App.Pet.find();

// Find pet with ID of 1.
var pet = App.Pet.find(1);

DataStore モデルへ

petsApp.Pet上記は多くのモデルを含む DS.RecordArray になりますが、petは 1 つだけApp.Petです。

コントローラに格納

App.IndexRoute = Ember.Route.extend({
   model: function() {
       return App.Pet.find(4);
   } 
});

ルーターはコントローラーのセットアップに使用されるため、ここでが ID 4 のルーターIndexControllerを保持するように指定しますApp.Pet。これはもちろん動的にすることができます。コントローラーは 1 つのモデルのみを表しているため、タイプは である必要がありますが、多くのペットObjectControllerを保管するために使用された場合は、タイプである必要があります。ArrayController

IndexControllerモデルを指定すると、インデックス ビュー ( )でモデルにアクセスできますdata-template-name="index"。これは、インデックス ルートに移動すると、IndexControllerが配置/インスタンス化IndexViewされ、インスタンス化されて DOM に配置されるためです。これらはすべてIndexRoute、コントローラーの設定について を参照した後で行われます。

テンプレートで次のようなことができるようになりました (model.必須ではありませんが): {{model.name}}、これにより、ペットの名前が取得されます。

#eachで表示

上記のコードの修正版を使用してすべてのペットを検索しますが、すべてのペットを返します。これは、findメソッドに引数を指定しないことで行われることに注意してください。

App.IndexRoute = Ember.Route.extend({
   model: function() {
       return App.Pet.find();
   }
});

これで、インデックス テンプレート内のすべてのペットをループできます。/を含める、 content./model.を除外する、を使用するなど、ループする方法はたくさんありますが、必要ではありませんが、それはまた別の機会に。現時点で重要なのは、これがうまく機能し、最も直感的なものになるということです。.contentmodelthiscontroller

{{#each pet in controller}}
    {{pet.name}}
{{/each}}

必要に応じて、このための jsFiddle をまとめます。私にお知らせください。

質問

ember-data には、データを取得する方法が組み込まれていますか? そうでない場合、AJAX リクエストはどこに実装する必要がありますか?

はい、それはEmberJS.com にいくつかの優れたガイドがあるEmber Data モジュールです。

JSON データを DS モデルに挿入する最良の方法は何ですか?

上記の例に従って Ember Data を使用します。

モデルをコントローラーと同期する最良の方法は何ですか?

適切なルートでフックを使用してmodel、コントローラーが表すモデルを指定します。

于 2013-02-21T21:10:13.910 に答える
2

<編集>

コメントで言ったように、この質問は一度に多くの質問をするので、フォローアップするために、進行中のフィドルがあります: http://jsfiddle.net/schawaska/dWcUp/

これは 100% ではありませんが、いくつかの質問をカバーしています。FixtureAdapter を使用します。時間を見つけて更新していきます。

</編集>

1 PHP スクリプトから JSON データを取得する ajax リクエストを作成する

Ember-Data がそれを処理します。次の点を考慮してください。

window.App = Em.Application.create();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.RESTAdapter'
});

App.Product = DS.Model.extend({
    name: DS.attr('string'),
    imageUrl: DS.attr('string')
})

上記のコードは、クライアント アプリ内のデータ ストア (ORM とほとんど同じ) を定義します。/productsEmber は設定より規約を (かなり) 使用するため、設定に従って、このコードは、バックエンドが GET、POST、PUT、および DELETE と対話するのと同じドメインにリソースを持っていることを期待します。

2 その情報を DataStore モデルに挿入する

上記のことを考慮して、次のいずれかを呼び出します。

App.store.find(App.Product)またApp.Product.find()

EmberData は、リソースを対象とする AJAX を介して GET リクエストを発行/productsしApp.Product.find(1)ます/products/1。アプリは、そのアダプターとアダプターstoreを使用して、JSON の結果を変換し、そのデータをモデルに具体化します。adapterserializerApp.Product

3 それらのモデルをコントローラー内に保存する

これは、アプリケーション ルーターを定義するときに行います。何をするにしても、Ember は独自のワークフローを実行しますが、いくつかのフックを提供して、その特定のアクションを制御できるようにします。次の点を考慮してください。

App.Router.map(function() {
  this.resource('products');
});

App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.Product.find();
  }
});

上記のコードは、ルート ( http://yourdomain.com/#/productsproductsでアクセスする) で使用されるモデルを設定します。内部的には、 のコードを生成するか、独自に定義して、 を拡張する必要があります。コントローラーには、モデルまたはモデル コレクションのエイリアスであるプロパティがあります。繰り返しますが、構成よりも規則です。ProductsControllerArrayControllercontent

4 handlebars テンプレートで {{#each}} を使用して情報を表示する

規則に従っている場合、handlebars テンプレートで、次のようにコレクションを反復処理する必要があります。

{{#each product in controller}}
    {{#linkTo 'product' product}}
        {{product.name}}
    {{/linkTo}}
{{/each}}
  • ember-data には、データを取得する方法が組み込まれていますか? そうでない場合、AJAX リクエストはどこに実装する必要がありますか?

はい、製品モデルを呼び出すだけで、バックエンドの製品リソースに AJAX リクエストを発行しているApp.Product.find()ときに空白が返され、サーバーからデータが返されたら、データを各モデルに具体化/入力します。ModelArray

  • JSON データを DS モデルに挿入する最良の方法は何ですか?

ember-data を使用している場合は、これについて心配する必要はありません。ほとんどの場合、フレームワークがそれを行います。それが私たちがそれを愛する理由です。ただし、バックエンドによっては、マッピング、名前空間、および複数形を構成する必要がある場合があります。

  • モデルをコントローラーと同期する最良の方法は何ですか?

これに似たもの：

var product = App.Product.createRecord({
    name: 'laptop',
    imageUrl: 'path/to/image.png'
});
product.save();

これにより、バックエンド API へのPOSTorリクエストが起動されます。PUT

あなたは間違いなくチェックする必要があります:

http://emberjs.com/guides/

https://peepcode.com/products/emberjs

http://toranbilllups.com/blog/archive/2013/01/03/Intro-to-ember-js-and-the-new-router-api/

于 2013-02-21T21:11:09.697 に答える