モデルの状態を整理する – Ember.js入門(25) | DevelopersIO
渡辺です。 国内では話題性の乏しいEmber.jsですが、良質なチュートリアル（翻訳）が公開されていました（Ember.js - Webアプリケーションを正しく行う）。 Ember.js in Actionの著者のエントリーです。 さて、今回はモデルの永続化シリーズの最終回として、モデルの状態について整理して解説します。 ember-dataでは、クライアントサイドを意識したモデルの状態を考慮する必要があります。 New モデルはstoreのcreateRecordメソッドで作成します。 モデルが作成され、saveされるまでモデルはNewとなります。 New状態はisNewプロパティがtrueとなることで確認出来ます。 var item = store.createRecord('item'); item.get('isNew'); // true item.save().then(fun
モデル変更時のコールバック処理 – Ember.js入門(24) | DevelopersIO
渡辺です。 モデルの永続化関連のエントリーが続いていますが、もうそろそろ一段落です。 今回は、モデルの変更が成功/失敗した時のコールバック処理とモデルのロールバック／キャンセルについて解説します。 saveメソッドのコールバック処理 saveメソッドは非同期でHTTPリクエストを送信します。 そして、戻り値はPromise型です。 saveが成功/失敗した場合の処理は、次のようにthenメソッドで、コールバック関数として登録できます。 model.save().then(function() { // callback when Success }, function() { // callback when Error }); それでは典型的なパターンをみてみましょう。 モデルの更新画面において「更新」ボタンによりモデルの更新処理を行い、一覧画面などに遷移するパターンを想定します。 この
モデルの永続化とRESTful API – Ember.js入門(23) | DevelopersIO
ember-dataによるモデルの登録・更新・削除の続きです。 毎度書いているかと思いますが、Ember.js(emeber-data)では、サーバサイドでモデルの永続化を行うためにRESTful APIを利用することが強く推奨されています。 モデルを取得する時、すなわちDataStoreのfindメソッドを呼び出した場合、GETリクエストが行われます。 詳細はember-dataとREST APIによるモデルの永続化を参照してください。 モデルを永続化する時、すなわちModelのsaveメソッドを呼び出した場合、POST/PUT/DELETEリクエストが行われます。 どのメソッドでリクエストが行われるかは、モデルの状態に依存します。 すなわち、登録（新規作成）状態であればPOST、更新状態であればPUT 、削除状態であればDELETEとなります。 モデルの登録とPOSTリクエスト 新規作
promiseによる非同期処理とbinding – Ember.js入門(21) | DevelopersIO
渡辺です。 Ember.jsでは、サーバサイドからRESTful APIを利用してモデルの情報を取得する構成がスタンダードです。 カスタマイズすることで他の構成をとることも可能ですが、基本的にはEmber.jsの作法に従った方がよいでしょう。 その方が開発効率も良く、はまりにくいですし、情報も多く集まります。 この辺りの空気感はRuby on Railsに通じるものがあると思います。 なお、「Ruby on Railsのクライアントサイド版」と言われることがありますが、それは大きな誤解です。 あくまでクライアントサイドのフレームワークであり、設計思想は全くことなります。 さて、今回はRESTful APIでモデルを取得した場合の挙動について解説します。 Routeで適切なモデルを取得するコードを定義すれば、テンプレート（View）で自然にレンダリングされるわけですが、サーバサイドプログラム
ember-dataのREST APIでメタデータを扱う – Ember.js入門(20) | DevelopersIO
渡辺です。 筆がのるときは連続投下です。 のらないときは沈黙しますが… ついにEmber.js入門の連載が20回突破です！ 今回はember-dataのREST APIにおけるメタデータの扱いについて説明します。 ember-dataを使ってモデルの一覧を取得する時、ページングなどを行いたい場合があります。 そのような場合は、クエリパラメータをREST APIに付与することができるため、ページ番号やソートキーなどをサーバに送信することができます。 // => http://ENDPOINT_URL/entry?page=3 this.store.find('entry', { page: 3 }); 純粋なREST APIにクエリパラメータを持たせることが、良いかどうかの議論には興味がありませんが、現実としてはクエリパラメータを必要とするシーンは多いでしょう。 このようなAPIを使う場合、
ember-data – Ember.js入門(14) | DevelopersIO
渡辺です。 いよいよ禁断のember-dataについて解説する時が来たようです。 ember-dataは、2014年1月3日時点でbetaバージョンのプロダクトです。ご利用の際は充分に検証を行ってください。 まあ、仕様はだいぶ安定してきましたし、ぼちぼちbetaもとれそうと言われ続けているなので、よほど怪しい機能を使わない限りは大丈夫だと思います（笑）今回はEmber.jsとember-dataのコンセプトについて説明します。Ember.jsでアプリケーションを組むときは重要です。 Ember.jsの設計思想とember-data どんなフレームワークであっても、そこには設計思想があります。設計思想に外れた使い方をしたならば、どれだけ良いフレームワークであっても使いにくく感じるのは当然です。特にEmber.jsは設計思想が明確であるため、アプリケーションの設計方針をEmber.jsの設計思
ItemController – Ember.js入門(13) | DevelopersIO
渡辺です。新年早々ですが、ガツガツいきましょう。 今回は、ItemControllerを紹介します。ItemControllerは、リスト表示などを行う時、モデルの情報を加工した値や、Viewに依存した値を出力するためによく使われます。しかし、ItemControllerは、Ember.jsでも利用頻度も高く非常に便利な機能なのですが、公式ドキュメントではチュートリアルにさらりと書いてあるだけでAPIドキュメントにしか記述されていないため、見つけにくい機能かもしれません。 ItemControllerとは？ 前回のObjectControllerとArrayController – Ember.js入門(12)では、ArrayControllerを解説しました。ArrayControllerはModelが複数の場合に利用するControllerで、View（テンプレート）ではeachヘルパ
Computed Properties – Ember.js入門(11) | DevelopersIO
渡辺です。 Ember.js入門の前回はObserverについて解説しましたが、今回はComputed Propertiesを扱います。Computed PropertiesはObserverの応用的な機能なので、Observer- Ember.js入門(10)を読んでいない方は、先に読まれることをオススメします。 さて、このComputed Propertiesですが、現時点では広く浸透した訳語がありません。「計算さるプロパティ」とか「自動算出プロパティ」といった訳語がパッと思いつきますがコレジャナイ感が漂っています。なので、Computed Propertiesとそのままの表記で解説します。ちょっと取っつきにくい名前かもしれませんが、理解してしまえば簡単で、かつ非常に便利な機能なのでマスターしておきましょう。 Computed Propertiesとは？ Computed Proper
条件句 – Ember.js入門(6) | DevelopersIO
Ember.js入門の6回目は条件句、いわゆるifとかunlessです。それほど難しい話題でもないのでサクサクといきましょう。 バインディングと条件句 Ember.jsでは他のテンプレートエンジンと同様にModelやControllerのプロパティを参照し、特定のタグを表示したり、しなかったりする制御を行うことができます。Ember.jsでは、さらに特徴的な機能があり、条件句の判定値も自動的にバインディングされ、変更されると自動的に再描画されます。 開いて閉じるアプリケーション 今回作成するアプリケーションは、ボタンをクリックするとリストが展開され、Closeボタンが表示されるアプリケーションです。Closeボタンをクリックすると最初の状態に戻ります。 Controllerを実装する 前回と同様に、Controllerを定義して、プロパティとアクションを定義します。 window.App
ControllerとModel – Ember.js入門(3) | DevelopersIO
先日、Ember.js 1.0.0 がリリースされました。RC1から約半年となりましたが、ついに正式版となります。しかし、最後の最後まで大きな変更が続いていたため、安定するのは先になるような気がします。 さて、Ember.jsでクライアントサイドMVCを学ぶシリーズの3回目は、ControllerとModelの関係についてです。一言で言えば、Ember.jsではControllerがModelをdecorateする設計となっており、View(Template)から自然にControllerやModelのプロパティにアクセスできる事が特徴です。 ModelとControllerの関係を理解する ModelとControllerの関係を理解するために簡単なアプリケーションを作成しましょう。ここで作成するのは、ある曲を再生するためのミュージックプレイヤーです。Modelとして曲データ（タイトルと
Ember.jsのカレンダー | Advent Calendar 2012 - Qiita
URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
Ember.js - Webアプリケーションを正しく行う
この記事では、これら2つの質問に答えていきます。やらなきゃいけないことはたくさんあります。早速、はじめましょう。なお、これから構築するアプリケーションのソースコードは、 GitHub に置いてあります。 何を作るか？ シンプルなフォトアルバムアプリを構築していきましょう。ページの下部には、写真のサムネールを横に並べます。ユーザが写真を選択するとURLが更新され、選択された写真がサムネールの並びの上に表示されます。 シンプルなスライドショー機能も用意しましょう。4秒毎に次の写真に切り替えます。 最終的なアプリケーションは図1のようになります。 （クリックすると拡大） GitHubに最終的なソースコードが置いてあります。アプリケーション本体はそのsiteディレクトリにあります。アプリケーションを開始する方法にはいろいろありますが、シンプルなのは以下のやり方です。 図1 – 最終的なアプリケーシ
The Ember CLI - Introduction - Ember CLI Guides
The Ember CLI (command line interface) is the official way to create, build, test, and serve the files that make up an Ember app or addon. Many things have to happen before a web app is ready for the browser. Ember CLI helps you get there with zero configuration. npm install -g ember-cli Visit Ember CLI on GitHub and the Ember.js Release Blog Posts for information on the latest releases and new fe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ember.js入門 の記事一覧 | DevelopersIO
http://emberjs.com/guides/routing/specifying-the-location-api/
実践入門 Ember.js 記事一覧 | gihyo.jp