Backbone.jsフレームワークのモデルとそのコレクションの詳細解説_基礎知識

モデルとは
Backbone の作者はモデルを次のように定義しています:

モデルはあらゆる Web アプリケーションの中核であり、インタラクティブなデータとほとんどのロジックが含まれています。例: 変換、検証、属性とアクセス権など。
それでは、最初にモデルを作成しましょう:

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

var person = new Person;

上記のコードでは、Person という名前のモデルを定義し、インスタンス化した後、person を取得します。 Model をインスタンス化するたびに、initialize() メソッドが自動的にトリガーされます (この原則はコレクションとビューにも適用されます)。もちろん、Model を定義するときに、initialize() メソッドを使用することは必須ではありませんが、Backbone を使用していると、これが不可欠であることがわかります。

モデルのプロパティを設定します
ここで、モデル インスタンスの作成時にモデルのプロパティを設定するためにいくつかのパラメーターを渡します。

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

//在实例化 Model 时直接设置
var person = new Person({ name: "StephenLee", age: 22 });

//我们也可以在 Model 实例化后，通过 set() 方法进行设置
var person = new Person();
person.set({ name: "StephenLee", age: 22});

モデル属性の取得
Model の get() メソッドを使用すると、プロパティを取得できます。

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

var person = new Person({ name: "StephenLee", age: 22});

var age = person.get("age"); // 22
var name = person.get("name"); // "StephenLee"

モデルのデフォルトのプロパティを設定します
インスタンス化時にモデルにデフォルトの属性値を含めたい場合があります。これは、モデルのデフォルト属性を定義することで実現できます。

Person = Backbone.Model.extend({
  defaults: {
    name: "LebronJames",
    age: 30,
  },
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

var person = new Person({ name: "StephenLee"});

var age = person.get("age"); // 因为实例化时未指定 age 值，则为默认值 30
var name = person.get("name"); //实例化制定了 name 值，则为 "StephenLee"

モデル属性を使用する
モデル内のメソッドをカスタマイズして、モデル内のプロパティを使用できます。 (すべてのカスタム メソッドはデフォルトでパブリックです)

Person = Backbone.Model.extend({
  defaults: {
    name: "LebronJames",
    age: 30,
    hobby: "basketball"
  },
  initialize: function(){
    alert("Welcome to Backbone!");
  },
  like: function( hobbyName ){
    this.set({ hobby: hobbyName });
  },
});

var person = new Person({ name: "StephenLee", age: 22});

person.like("coding");// 设置 StephenLee's hobby 为 coding
var hobby = person.get("hobby"); // "coding"

モデルのプロパティの変更をリッスンします
Backbone のメカニズムに従って、モデルの任意の属性を監視できます。次に、属性名を例として、initialize() メソッドでモデルの属性をバインドして監視します。

Person = Backbone.Model.extend({
  defaults: {
    name: "LebronJames",
    age: 30,
  },
  initialize: function(){
    alert("Welcome to Backbone!");
    this.on("change:name", function(model){
      var name = model.get("name"); // 'KobeBryant'
      alert("Changed my name to " + name );
    });
  }
});

var person = new Person();

var age = person.set({name : "KobeBryant"});

上記のコードを通じて、モデルの特定の属性を監視する方法がわかりました。モデルのすべてのプロパティを監視する必要がある場合は、 'this.on("change", function(model){}); を使用します。

サーバーとモデル間のデータ対話
前の記事で述べたように、Model にはインタラクティブなデータが含まれているため、その機能の 1 つはサーバーからデータを運び、サーバーと対話することです。ここで、サーバー側に mysql テーブル ユーザーが存在すると仮定します。このテーブルには、id、name、および email の 3 つのフィールドがあります。サーバー側は REST スタイルを使用してフロントエンドと通信し、URL: /user を使用して対話します。私たちのモデルは次のように定義されています:

var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});

モデルを作成する
Backbone の各モデルには属性 ID があり、サーバー側のデータと 1 対 1 で対応します。サーバー側の mysql テーブル ユーザーに新しいレコードを追加したい場合は、モデルをインスタンス化して save() メソッドを呼び出すだけです。このとき、Model インスタンスの属性 ID は空です。これは Model が新しく作成されたことを意味するため、Backbone は指定された URL に POST リクエストを送信します。

var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});

var user = new Usermodel();
//注意，我们并没有在此定义 id 属性
var userDetails = {
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
};

//因为 model 没有 id 属性，所以此时使用 save() 方法，Backbone 会向服务器端发送一个 POST 请求，服务器端收到数据后，将其存储，并返回包含 id 的信息给 Model
user.save(userDetails, {
  success: function (user) {
    alert(user.toJSON());
  }
})

現時点では、サーバー側の mysql のユーザー テーブルに、名前 StephenLee と電子メール stephen.lee@mencoplatform.com の追加レコードがあります。

モデルを入手
モデルを作成し、それをサーバー側のデータベースに保存しました。モデルの作成時にサーバーから返された id 属性値は 1 であると仮定します。この時点で、id 値を使用して、データの取得。 id 属性値を使用して Model インスタンスを初期化すると、Backbone は fetch() オペレーションを通じて指定された URL に GET リクエストを送信します。

var user = new Usermodel({id: 1});//初始化时指定 id 的值

//利用 fetch() 方法将会向 user/1 请求数据，服务器端将会返回完整的 user 记录，包含 name,email 等信息
user.fetch({
  success: function (user) {
    alert(user.toJSON());
  }
})

モデルを更新する
保存されたユーザー レコードを変更し、既知の ID 値を使用する必要がある場合は、save() メソッドも使用しますが、この時点では ID が空ではないため、Backbone は指定された URL に PUT リクエストを送信します。

var user = new Usermodel({
  id: 1,
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//因为指定了 id 值，此时使用 save() 方法，Backbone 将会向 user/1 发送 PUT 请求，将会对数据库中 id 为1的记录的 email 修改
user.save({email: 'newemail@qq.com'}, {
  success: function (model) {
    alert(user.toJSON());
  }
});

モデルを削除する
データベース内のレコードを削除する必要がある場合は、既知の ID 値を使用して destroy() メソッドを使用します。この時点で、Backbone は指定された URL に DELETE 操作を送信します。

var user = new Usermodel({
  id: 1,
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//因为指定了 id 值，此时使用 destroy() 方法，Backbone 将会向 user/1 发送 DELETE 请求，服务器端接收请求后，将会在数据库中删除 id 为 1的数据
user.destroy({
  success: function () {
    alert('Destroyed');
  }
});

コレクションとは
要するに、Backbone の Collection は順序付けられたモデルのコレクションです。たとえば、次のような状況で使用できます。

Model: Student, Collection: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Animal, Collection: Zoo

コレクションは通常、同じタイプのモデルのみを使用しますが、モデルは次のような異なるタイプのコレクションに属することができます。

Model: Student, Collection: Gym Class
Model: Student, Collection: Art Class
Model: Student, Collection: English Class

コレクションを作成する

//定义 Model Song
var Song = Backbone.Model.extend({
  defaults: {
    name: "Not specified",
    artist: "Not specified"
  },
  initialize: function(){
    console.log("Music is the answer");
  }
});

//定义 Collection Album
var Album = Backbone.Collection.extend({
  model: Song //指定 Collection 内的 Model 为 Song
});

var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });

var myAlbum = new Album([ song1, song2, song3]);
console.log( myAlbum.models ); // 输出为 [song1, song2, song3]