Contoh penggunaan Model dan Koleksi dalam rangka kerja Backbone.js

Model
Mengenai backbone, perkara yang paling asas ialah model Perkara ini seperti model pemetaan pangkalan data dalam pembangunan back-end Ia juga merupakan model objek data, dan harus mempunyai atribut yang sama seperti back-. model hujung. (Hanya sifat yang perlu dimanipulasi melalui bahagian hadapan).
Mari kita bawa anda langkah demi langkah melalui contoh untuk memahami apa itu model tulang belakang.
Mula-mula tentukan halaman html:

<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
 *此处填充代码
 **/
})(jQuery);
</script>
</html>

Salin selepas log masuk

Kod berikut perlu diisi dalam fungsi dalam tag skrip html ini.

1. Objek paling ringkas

Man = Backbone.Model.extend({
    initialize: function(){
      alert('Hey, you create me!');
    }
  });
var man = new Man;

Salin selepas log masuk

Ini adalah sangat mudah. Terdapat juga paparan model dalam helloworld, dan tiada atribut ditakrifkan. Berikut ialah kaedah semasa permulaan, atau dipanggil pembina.

2. Dua kaedah penetapan objek
Kaedah pertama ialah mentakrifkannya secara langsung dan menetapkan nilai lalai.

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
});

var man = new Man;
alert(man.get('name'));

Salin selepas log masuk

Jenis kedua ditakrifkan apabila menetapkan

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  }
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));

Salin selepas log masuk

Get digunakan apabila mendapat nilai.

3. Kaedah dalam objek

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
alert(man.aboutMe());

Salin selepas log masuk

4. Pantau perubahan dalam atribut dalam objek

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。

Salin selepas log masuk

5. Tambahkan peraturan pengesahan dan gesaan ralat untuk objek

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。

Salin selepas log masuk

6 Mendapatkan dan menyimpan objek memerlukan sokongan bahagian pelayan untuk menguji.
Pertama, anda perlu menentukan atribut url untuk objek Apabila kaedah simpan dipanggil, semua atribut objek akan diposkan ke pelayan.

Man = Backbone.Model.extend({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况，如果直接使用fetch方法，那么他会发送get请求到你model的url中，
  //你在服务器端可以通过判断是get还是post来进行对应的操作。
man1.fetch();
//第二种情况，在fetch中加入参数，如下：
man1.fetch({url:'/getmans/'});
  //这样，就会发送get请求到/getmans/这个url中，
  //服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。

//不过接受服务器端返回的数据方法是这样的：
man1.fetch({url:'/getmans/',success:function(model,response){
    alert('success');
    //model为获取到的数据
    alert(model.get('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});

Salin selepas log masuk

Nota: Kod di atas hanyalah kod yang boleh dilaksanakan seperti biasa, tetapi akan ada contoh di bahagian pelayan kemudian.
Satu lagi perkara yang perlu ditambah di sini ialah semua operasi tak segerak pada pelayan diselesaikan melalui kaedah Backbone.sync Apabila kaedah ini dipanggil, parameter akan diluluskan secara automatik dan permintaan yang sepadan akan dihantar ke pelayan berdasarkan parameter. Sebagai contoh, jika anda menyimpan, Backbone akan menentukan sama ada objek anda baru. Jika ia baru dibuat, parameter tersebut adalah cipta kaedah, maka Parameter dibaca Jika ia dimusnahkan, maka parameter dipadam. Ia juga dipanggil CRUD ("buat", "baca", "kemas kini", atau "padam"), dan jenis permintaan yang sepadan dengan empat parameter ini ialah POST, GET, PUT dan DELETE. Anda boleh melakukan operasi CRUD yang sepadan pada pelayan berdasarkan jenis permintaan ini.

Nota:
Mengenai url dan urlRoot, jika anda menetapkan url, maka CRUD anda akan menghantar permintaan yang sepadan ke url ini, tetapi masalah lain ialah permintaan padam Permintaan dihantar, tetapi tiada data dihantar, maka anda Pelayan tidak tahu objek (rekod) mana yang harus dipadamkan, jadi inilah satu lagi konsep urlRoot Selepas anda menetapkan urlRoot, apabila anda menghantar permintaan PUT dan DELETE, alamat URL yang diminta ialah: /baseurl/[model.id ], supaya anda boleh mengemas kini. atau padamkan objek yang sepadan (rekod) pada bahagian pelayan dengan mengekstrak nilai di belakang url.

Koleksi
Koleksi ialah koleksi objek model yang tersusun Konsepnya sangat mudah untuk difahami. Anda akan mendapatinya lebih mudah selepas melihat beberapa contoh.
1. Contoh buku dan rak buku

Book = Backbone.Model.extend({

defaults : {  // 感谢网友蓝色动力指正改为defaults

title:'default'

},

initialize: function(){

//alert('Hey, you create me!');

}

});

BookShelf = Backbone.Collection.extend({

model : Book

});

var book1 = new Book({title : 'book1'});

var book2 = new Book({title : 'book2'});

var book3 = new Book({title : 'book3'});

//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add

var bookShelf = new BookShelf;

bookShelf.add(book1);

bookShelf.add(book2);

bookShelf.add(book3);

bookShelf.remove(book3);



//基于underscore这个js库，还可以使用each的方法获取collection中的数据

bookShelf.each(function(book){

alert(book.get('title'));

});

Salin selepas log masuk

Ia sangat mudah, tiada penjelasan
2. Gunakan ambil untuk mendapatkan data daripada pelayan
Tentukan dahulu url dalam Rak Buku di atas Harap maklum bahawa tiada atribut urlRoot dalam koleksi. Atau anda mentakrifkan nilai url secara langsung dalam kaedah pengambilan, seperti berikut:

bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

collection.each(function(book){

alert(book.get('title'));

});

},error:function(){

alert('error');

}});

Salin selepas log masuk

Ia juga mentakrifkan dua kaedah yang menerima nilai pulangan Saya rasa maksud khusus mudah difahami Jika data dalam format yang betul dikembalikan, kaedah kejayaan akan dipanggil. kaedah ralat akan dipanggil Sudah tentu, kaedah ralat juga kelihatan Tambah parameter formal yang sama dengan kaedah kejayaan.
Format pemulangan Rak Buku yang sepadan adalah seperti berikut: [{'title':'book1'},{'title':'book2'}....]
3. kaedah tetapan semula
Kaedah ini perlu diselaraskan dengan pengambilan di atas Selepas pengumpulan mengambil data, ia akan memanggil kaedah tetapan semula, jadi anda perlu menentukan kaedah tetapan semula dalam koleksi atau mengikat kaedah tetapan semula. Berikut ialah demo menggunakan pengikatan:

bookShelf.bind('reset',showAllBooks);

showAllBooks = function(){

bookShelf.each(function(book){

  &#8203;//将book数据渲染到页面。

});

}

Salin selepas log masuk

Langkah mengikat mesti dilakukan sebelum diambil.
Kod lengkap untuk pengumpulan diberikan di bawah, yang memerlukan sokongan bahagian pelayan Pembinaan bahagian pelayan akan ditulis kemudian.

<!DOCTYPE html>
<html>
<head>
  <title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
  //collection是一个简单的models的有序集合
  //1、一个简单的例子

  Book = Backbone.Model.extend({
    defaults : {  // 感谢网友蓝色动力指正改为defaults
      title:'default'
    },
    initialize: function(){
      //alert('Hey, you create me!');
    }
  });
  BookShelf = Backbone.Collection.extend({
    model : Book
  });

  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book({title : 'book3'});

  //var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);
  /*
  for(var i=0; i<bookShelf.models.length; i++) {
    alert(bookShelf.models[i].get('title'));
  }
  */
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
    alert(book.get('title'));
  });

  //2、使用fetch从服务器端获取数据,使用reset渲染
  bookShelf.bind('reset', showAllBooks);
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
    collection.each(function(book){
      alert(book.get('title'));
    });
  },error:function(){
    alert('error');
  }});
  showAllBooks = function(){
    bookShelf.each(function(book){
      &#8203;//将book数据渲染到页面。
    });
  }
  //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>

Salin selepas log masuk