02: Modelを作成しsetとgetを使う

1. model.jsをつくる

js/model.jsをつくり、そこにモデルを定義します。また、HTMLからそのファイルを読み込みます。

index.html

...
<script src="js/app.js"></script>
<script src="js/model.js"></script>
</head>
...

js/app.js

window.App = {};

js/model.js

App.Schedule = Backbone.Model.extend();

これでBackbone.Modelを継承したScheduleモデルができます。

3. モデルクラスのインスタンスをつくる

つくったモデルクラスはnewすることでインスタンスを作成できます。app.jsに動作確認のスクリプトを記述していきます。

js/app.js

window.App = {};

$(function() {
  var schedule = new App.Schedule();
});

4. setとget

setメソッドで属性値を設定し、getメソッドで属性値を取り出すことができます。

js/app.js

window.App = {};

$(function() {
  var schedule = new App.Schedule();

  schedule.set({
    'title': '打ち合わせ',
    'datetime': moment('2013-10-26 15:00')
  });

  $('body').html(
    schedule.get('datetime').format('MM月DD日 HH時mm分') + '：' + schedule.get('title')
  );
});

この状態でindex.htmlをブラウザで確認すると10月26日 15時00分：打ち合わせと表示されれば成功です。