memorycraft wiki

<< SproutCore ドキュメント翻訳トップ

ビルトインREST APIの使用

NOTE:

このページはまだ書きかけの項目です。. 気軽に追記してください. June 24, 2008 / stefanfoulis

SproutCore?は、Ajaxでアクセスできれば、どのサーバー環境でも使用できます。SproutCore?アプリケーションは完全にWEBブラウザの中で実行されるため、あなたはサーバーからデータを検索し、それをメモリ上のデータストアにロードする薄いコードの層を書くだけでよくなります。バックエンドからデータを検索するために自分で独自のXHRリクエストを書く代わりに、ビルトインのREST APIを使用することも可能です。それは全ての基本的なCRUD操作のための標準的なURLを定義します。
これは以下のような簡潔さを可能にします。（Contactsサンプル内ではcontactはRecordインスタンスであることを想定しています）

• contact.refresh(); サーバーからのデータとそれを保持しているローカルストアを最新の状態にします。.
• contact.commit(); 変更されたデータをサーバーに保存します。

ローカルストアに新規レコードをつくり、バックエンドのサーバーに保存することは、次のようにシンプルです。

• var newrecord = Contacts.Contact.newRecord({firstName: "Steve",lastName:"Jobs"}); ローカルストア内で即時にレコードが使用可能になります。スクリーン上にモデルを監視しているウィジェットがあった場合、新しい連絡先が画面に手品のように現れます。
• newrecord.dataStore = Contacts.server; これは代替案です、なぜなら私はまだそれをどうやって自動にするかが掴めていません / stefanfoulis
• newrecord.commit(); は、バックエンドにレコードを作製します。どんなに遅れても .commit()はアップデートされます。

このページでは、どうすればあなたのアプリケーションでREST APIを使えるかを説明したいと思います。それにはあなたがWEBサービスをこのAPIのルールにあわせるように変更できることを前提とします。もし変更できないようであれば、Storeにデータをロードする部分を独自のAjaxコードで記述することを検討してください。

モデル（レコード）の準備

モデルに対して、変更をどこにGET、POST送信すればよいかを教えてあげるために、いくつかの属性を追加する必要があります(contacts/models/contacts.js):

Contacts.Contact = SC.Record.extend( 
/** @scope Contacts.Contact.prototype */ { 

 // EM: I think this is the correct property name
 dataSource: Contacts.server, 

 /*
 A list of all the properties which should be handled by the framework.
 Additionally to the here mentioned ones, **guid** and **id** (?) are added implicitly.
 */
 properties: ['firstName','lastName'],

 /*
 define the URL for this Record type. 
    - updates will be POSTed to '/ajaxcom/contact/update' 
    - new records will be POSTed to '/ajaxcom/contact/create' 
    - and existing records will be fetched (GET) from
      '/ajacom/contact/show/23' (if the record has guid=23 and
       only one record is fetched)
 */
 resourceURL: 'ajaxcom/contact', 

 fullName: function() { 
   return this.getEach('firstName', 'lastName').compact().join(' '); 
 }.property('firstName', 'lastName') 

}) ; 

バックエンドサーバーの準備

NOTE:

リクエストが動作するように, 同一ドメインからサービスされる必要があります。SproutCore?アプリケーションに対してバックエンドサーバーが機能するように, sc-config.rbのプロキシ設定の記述を使用します. (TODO: add docs on proxy config)

SproutCore?がサーバーバックエンド（例：Django,RoRなど）と対話できるように、バックエンドは常にJSONデータで応答できるようにします。 すぐに結果に満足するには、/ajaxcom/contact/list のURL（mimeタイプは”application/json”）で、以下のJSONを返す ’view’を作成してください。

{"records":
    [ {"last_name": "Jobs",
       "first_name": "Steve",
       "guid": "1",
       "type": "Contact"},
      {"last_name": "Sculley",
       "first_name": "John",
       "guid": "2",
       "type": "Contact"},
      {"last_name": "Scott",
       "first_name": "Michael",
       "guid": "3",
       "type": "Contact"}
    ],
 "ids": [1,2,3]
}

属性がキャメルケース*1でなくアンダーラインで定義されていることに注してください。SproutCore?はバックエンドと対話する際に、属性名を自動的に変換します。firstName は first_name に変換されます。

FireBug?のコンソールで、以下の簡単なコマンドを入力すると、サーバーからデータがロードされ、ローカルのStoreに保持されます。

Contacts.server.listFor({recordType: Contacts.Contact})

続きはまたそのうち…

このページの原文

関連ページ

1. Memorycraft Wiki561日前
2. SproutCore ドキュメント翻訳561日前