js-model チュートリアル

js

js-modelとは

公式 ： http://benpickles.github.com/js-model/
js-modelはjQuery上で動く、JavaScriptでモデルを扱うためのフレームワーク。
以下の文章は公式サイトのチュートリアルの勝手訳。

オブジェクトの生成

モデルクラスはModel()ファクトリーを使用して生成する。

var Project = Model("project")

これで"project"モデルのインスタンスを生成できるようになる。

オブジェクトの操作

attr()メソッドで属性を読み書きすることができる。

var project = new Project({ title: "stuff" })
project.attr("title", "nonsense")
project.save()

オブジェクトの探索

save()を呼ぶと、モデルはクラスの"コレクション"に追加され、firt()を呼ぶことで取り出すことができる。

Project.first()
// => project

すべてのモデルをコレクションから取り出すにはall()を使用する。

Project.all()
// => [project]

カスタムプロパティ

モデルにメソッドとプロパティを付与することもできる。

クラスプロパティ

モデルを設定するときに、2番目の引数にオブジェクトを渡す。プロパティはこのクラスに定義される。

var Project = Model("project", {
  find_by_title: function(title) {
    return this.detect(function() {
      return this.attr("title") == title
    })
  }
})

Project.find_by_title("stuff")
// => "stuff" project model
インスタンスプロパティ

モデルを設定するときの3番目の引数はインスタンスプロパティの定義に使用される。これはモデルのprototypeに追加されるので、デフォルトを書き換えることもできる。

var Project = Model("project", {}, {
  markAsDone: function() {
    this.attr("done", true)
  }
})

Project.find(1).markAsDone()
// "stuff" project marked as done

関連

単純な関連はインスタンスメソッドを追加することで真似ることができる。CatはMatに所属し、MatはCatを複数もつ。

var Cat = Model("cat", {}, {
  mat: function() {
    var mat_id = this.attr("mat_id")

    return Mat.detect(function() {
      return this.id() == mat_id
    })
  }
})

var Mat = Model("mat", {}, {
  cats: function() {
    var id = this.id()

    return Cat.select(function() {
      return this.attr("mat_id") == id
    })
  }
})

イベント

オブジェクトのライフサイクルベースで、イベントをリッスンすることができる。UI要素とデータを結びつけるために使用するのが典型的だ。

クラスイベント

コレクションにオブジェクトが追加/削除されるイベントにバインドすることができる。

Post.bind("add", function(new_object) {
  add_object_to_ui(new_object)
})

Post.bind("remove", function(removed_object) {
  remove_object_from_ui(removed_object)
})
インスタンスイベント

特定のインスタンスの特定のイベントに対してバインドもできる。

post.bind("update", function() {
  my_ui_elem.text(this.attr("name"))
})

インスタンスが削除されたときにも可能。

post.bind("remove", function() {
  my_ui_elem.remove()
})
カスタムイベント

UI要素と結びついてるオブジェクトに対しカスタムイベントを設定する、なんてこともできる。

post.bind("turn_blue", function() {
  my_ui_elem.css("background", "blue")
})

post.trigger("turn_blue")

永続化

REST

jQueryのajax()メソッドを利用し、GET/POST/PUT/DELETEでモデルのデータをサーバーとJSONでやりとりする。

var Project = Model("project", {
  persistence: Model.REST("/projects")
})

save()またはdestroy()で適切なRESTリクエストが送られる。

var project = new Project({ name: "stuff" })
project.save()                            //   POST /projects
project.attr("name", "nonsense").save()   //    PUT /projects/1
project.destroy()                         // DELETE /projects/1
localStorage

localStorageにデータを保存することもできる。Safari,Chrome,Firefox,Opera,IE8,Safari Mobileがサポートされている。

var Project = Model("project", {
  persistence: Model.localStorage()
})
データのロード

保存したデータはload()で読み出すことができる。

// wait for the document to load
$(function() {
  Project.load(function() {
    // do something with the UI
  })
})