Penjelasan terperinci tentang Model model dan koleksinya dalam rangka kerja Backbone.js

Penjelasan terperinci tentang Model model dan koleksinya dalam rangka kerja Backbone.js_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 15:02:13

asal

1553 orang telah melayarinya

Apakah Model
Pengarang Backbone mentakrifkan Model seperti ini:

Model ialah teras bagi mana-mana aplikasi web, ia mengandungi data interaktif dan kebanyakan logik. Contohnya: penukaran, pengesahan, atribut dan hak akses, dsb.
Jadi, mari buat Model dahulu:

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

var person = new Person;

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan Model bernama Orang, dan selepas instantiasi, kami mendapat orang. Pada bila-bila masa anda membuat instantiate Model, kaedah initialize() dicetuskan secara automatik (prinsip ini juga digunakan pada koleksi dan paparan). Sudah tentu, ia tidak wajib untuk menggunakan kaedah initialize() apabila mentakrifkan Model, tetapi semasa anda menggunakan Backbone, anda akan mendapati bahawa ia amat diperlukan.

Tetapkan sifat Model
Sekarang kami ingin lulus beberapa parameter untuk menetapkan sifat Model semasa mencipta contoh Model:

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});

Salin selepas log masuk

Dapatkan atribut Model
Menggunakan kaedah get() Model, kita boleh mendapatkan sifat:

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"

Salin selepas log masuk

Tetapkan sifat lalai Model
Kadangkala anda mahu Model mengandungi beberapa nilai atribut lalai apabila ia dibuat seketika Ini boleh dicapai dengan mentakrifkan atribut lalai Model:

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"

Salin selepas log masuk

Gunakan atribut Model
Anda boleh menyesuaikan kaedah dalam Model untuk menggunakan sifat dalam Model. (Semua kaedah tersuai adalah awam secara lalai)

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"

Salin selepas log masuk

Dengar perubahan dalam sifat Model
Menurut mekanisme Backbone, kami boleh memantau mana-mana atribut Model Seterusnya, kami cuba mengikat atribut Model dalam kaedah initialize() untuk memantau, mengambil nama atribut sebagai contoh:

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"});

Salin selepas log masuk

Melalui kod di atas, kami tahu cara memantau atribut tertentu Model. Katakan kita perlu memantau semua sifat Model, kemudian gunakan 'this.on("change", function(model){} .

Interaksi data antara pelayan dan Model
Seperti yang dinyatakan dalam artikel sebelum ini, Model mengandungi data interaktif, jadi salah satu fungsinya adalah untuk membawa data dari pelayan dan berinteraksi dengan pelayan. Sekarang kita menganggap bahawa terdapat pengguna jadual mysql di bahagian pelayan Jadual mempunyai tiga medan id, nama dan e-mel. Bahagian pelayan menggunakan gaya REST untuk berkomunikasi dengan bahagian hadapan, menggunakan URL: /pengguna untuk berinteraksi. Model kami ditakrifkan sebagai:

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

Salin selepas log masuk

Buat Model
Setiap Model dalam Backbone mempunyai id atribut, yang sepadan dengan data sebelah pelayan satu-ke-satu. Jika kami ingin menambah rekod baharu kepada pengguna jadual mysql di bahagian pelayan, kami hanya perlu membuat instantiate Model dan kemudian memanggil kaedah save(). Pada masa ini, id atribut bagi contoh Model kosong, yang bermaksud bahawa Model baru dibuat, jadi Backbone akan menghantar permintaan POST ke URL yang ditentukan.

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());
  }
})

Salin selepas log masuk

Pada masa ini, terdapat rekod tambahan dengan nama StephenLee dan e-mel stephen.lee@mencoplatform.com dalam jadual pengguna mysql di bahagian pelayan.

Dapatkan Model
Kami baru sahaja mencipta Model dan menyimpannya dalam pangkalan data sebelah pelayan Andaikan bahawa apabila mencipta Model, nilai atribut id yang dikembalikan oleh pelayan ialah 1. Pada masa ini, kami boleh menggunakan nilai id untuk menyimpan. Pengambilan semula data. Apabila kami memulakan contoh Model dengan nilai atribut id, Backbone akan menghantar permintaan GET ke URL yang ditentukan melalui operasi fetch().

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

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

Salin selepas log masuk

Kemas kini Model
Jika kami perlu mengubah suai rekod pengguna yang disimpan dan menggunakan nilai id yang diketahui, kami juga menggunakan kaedah save(), tetapi kerana id tidak kosong pada masa ini, Backbone akan menghantar permintaan PUT ke URL yang ditentukan.

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());
  }
});

Salin selepas log masuk

Padamkan Model
Jika kita perlu memadamkan rekod dalam pangkalan data, gunakan kaedah destroy() menggunakan nilai id yang diketahui. Pada ketika ini, Backbone akan menghantar operasi DELETE ke URL yang ditentukan.

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');
  }
});

Salin selepas log masuk

Apakah Koleksi
Ringkasnya, Collection in Backbone ialah koleksi Model yang tersusun Sebagai contoh, ia boleh digunakan dalam situasi berikut:

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

Salin selepas log masuk

Koleksi secara amnya hanya menggunakan jenis Model yang sama, tetapi Model boleh tergolong dalam jenis Koleksi yang berbeza, seperti:

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

Salin selepas log masuk

Buat Koleksi

//定义 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]

Salin selepas log masuk