Backbone.jsアプリケーション開発ガイド

102

5

章 チュートリアル

2

−ライブラリ（

REST

を使った

Backbone.js

アプリケーション）

図5-3　CSSの適用結果

この表示は最後まで使われることになりますが、実際には複数の本が表示されるでしょう。

bookContainer

の

div

要素を何個かコピーすれば、より現実に近い表示を確認できます。そろそ

ろ、アプリケーション本体の開発に移ることにしましょう。

5.1.1

 モデル、コレクション、ビュー、アプリケーション

まず作成するのは、本を表すモデルと本のリストを表すコレクションです。これらはとてもシン

プルで、モデルの中でいくつかデフォルト値が宣言されている程度です。

// site/js/models/book.js

var app = app || {};

app.Book = Backbone.Model.extend({

defaults: {

coverImage: 'img/placeholder.png',

title: '

無題

',

author:

'

不明

',

releaseDate: '

不明

',

keywords: '

なし

'

}

});

// site/js/collections/library.js

var app = app || {};

app.Library = Backbone.Collection.extend({

5.1

 セットアップ

103

model: app.Book

});

次に、本を表示するためのビューを定義します。

// site/js/views/book.js ...