実践入門 Ember.js

第5回 実践:ショッピングカート①(Array, Computed Property)

この記事を読むのに必要な時間:およそ 5.5 分

前回はユーザのインタラクションを受け取る方法を解説しました。今回はこれまでの連載内容を踏まえつつ,Ember.jsが提供する汎用的な機能を解説します。

今回取り扱うEmber.jsアプリケーションはこちらです。

「商品を選択してカートに入れ,まとめて購入できる」というアプリケーションを作りながら,汎用的な機能をひとつずつ紹介していきます。

前準備

本稿の対象バージョンはこちらです。

第3回の記事を参考にして必要なファイルを作成してください。

ファイルの作成が完了したら,今回のアプリケーションを作成するために画面と初期データの準備を行います。

まずはルーティングとデータを準備します。

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('products', {path: '/'}, function() {
    this.route('show', {path: 'products/:id'});
  });

  this.resource('cart');
});

App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return [{
      id: 1,
      name: 'ステッカー',
      price: 6.0,
      url: 'http://devswag.com/products/ember-sticker'
    }, {
      id: 2,
      name: 'Tシャツ',
      price: 22.0,
      url: 'http://devswag.com/products/ember-js-tshirt'
    }, {
      id: 3,
      name: 'ぬいぐるみ',
      price: 10.0,
      url: 'http://devswag.com/products/ember-mascot-tomster'
    }];
  }
});

App.ProductsShowRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('products').filter(function(product) {
      return product.id === Number(params.id);
    })[0];
  }
});

次はテンプレートを準備します。

<script type="text/x-handlebars">
  <header>
    {{link-to "商品一覧" "products"}}
    {{link-to "カート" "cart"}}
  </header>

  <main>
    {{outlet}}
  </main>
</script>

<script type="text/x-handlebars" data-template-name="products/index">
  <h1>注目の商品</h1>

  <ul>
    {{#each product in model}}
      <li>{{link-to product.name "products.show" product}}</li>
    {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="products/show">
  <h2>{{model.name}}</h2>

  <a target="_blank" {{bind-attr href=model.url}}>詳しく見る</a>

  ${{model.price}} USD
  <button>カートに入れる</button>
</script>

<script type="text/x-handlebars" data-template-name="cart">
  <h1>注文確認</h1>

  カートは空です。
</script>

さて,ここまでで基本となる画面を準備しました。

ではこれからカートを動くようにしていきましょう。

著者プロフィール

佐藤竜之介(さとうりゅうのすけ)

株式会社えにしテック所属。JavaScriptとRubyが好きなウェブ系プログラマ。オープンソースソフトウェアに強い関心がありEmber.jsにも数多くのパッチを送っている。

ブログ:http://tricknotes.hateblo.jp/
Twitter:@tricknotes

コメント

コメントの記入