Anwendungsbeispiele für Modell und Sammlung im Backbone.js-Framework

Modell
In Bezug auf das Backbone ist das Modell das Grundlegendste. Dieses Ding ähnelt dem Datenbankzuordnungsmodell in der Back-End-Entwicklung. Es ist auch ein Modell von Datenobjekten und sollte die gleichen Attribute wie das Back-End haben. Endmodell. (Nur Eigenschaften, die über das Frontend manipuliert werden müssen).
Lassen Sie uns Schritt für Schritt durch Beispiele führen, um zu verstehen, was das Backbone-Modell ist.
Definieren Sie zunächst eine HTML-Seite:

<!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>

Nach dem Login kopieren

Der folgende Code muss in die Funktion im Skript-Tag dieses HTML eingefügt werden.

1. Das einfachste Objekt

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

Nach dem Login kopieren

Dies ist sehr einfach. Es gibt auch eine Modellanzeige in helloworld und es werden keine Attribute definiert. Hier handelt es sich um eine Methode, die als Konstruktor bezeichnet wird.

2. Zwei Methoden der Objektzuweisung
Die erste Methode besteht darin, es direkt zu definieren und den Standardwert festzulegen.

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

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

Nach dem Login kopieren

Der zweite Typ wird bei der Zuweisung
definiert

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

Nach dem Login kopieren

Get wird zum Abrufen von Werten verwendet.

3. Methoden in Objekten

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

Nach dem Login kopieren

4. Überwachen Sie Änderungen an Attributen in Objekten

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。

Nach dem Login kopieren

5. Validierungsregeln und Fehleraufforderungen für Objekte hinzufügen

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:''}); //根据验证规则，弹出错误提示。

Nach dem Login kopieren

6. Das Abrufen und Speichern von Objekten erfordert zum Testen serverseitige Unterstützung.
Zuerst müssen Sie ein URL-Attribut für das Objekt definieren. Wenn die Speichermethode aufgerufen wird, werden alle Attribute des Objekts auf dem Server veröffentlicht.

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

Nach dem Login kopieren

Hinweis: Bei den oben genannten Codes handelt es sich nur um Codes, die normal ausgeführt werden können. Es werden jedoch später Beispiele auf der Serverseite angezeigt.
Eine weitere Sache, die hier hinzugefügt werden muss, ist, dass alle asynchronen Vorgänge auf dem Server über die Backbone.sync-Methode abgeschlossen werden. Wenn diese Methode aufgerufen wird, wird automatisch ein Parameter übergeben und die entsprechende Anforderung wird basierend auf den Parametern an den Server gesendet . Wenn Sie beispielsweise speichern, ermittelt Backbone, ob Ihr Objekt neu erstellt wurde. Wenn es sich um ein vorhandenes Objekt handelt, das nur geändert wurde, lautet der Parameter „Update“. Methode, dann Der Parameter wird gelesen. Wenn er zerstört ist, wird der Parameter gelöscht. Es wird auch CRUD („erstellen“, „lesen“, „aktualisieren“ oder „löschen“) genannt, und die diesen vier Parametern entsprechenden Anforderungstypen sind POST, GET, PUT und DELETE. Basierend auf diesem Anforderungstyp können Sie entsprechende CRUD-Operationen auf dem Server ausführen.

Hinweis:
In Bezug auf die URL und URLRoot: Wenn Sie die URL festlegen, sendet Ihr CRUD die entsprechende Anforderung an diese URL. Ein weiteres Problem besteht darin, dass die Anforderung gesendet wird, aber keine Daten gesendet werden. Der Server sendet dies nicht Sie wissen, welches Objekt (Datensatz) gelöscht werden soll. Nachdem Sie urlRoot festgelegt haben, lautet die angeforderte URL-Adresse beim Senden von PUT- und DELETE-Anfragen: /baseurl/[model.id ], damit Sie dies tun können Aktualisieren oder löschen Sie das entsprechende Objekt (Datensatz) auf der Serverseite, indem Sie den Wert hinter der URL extrahieren.

Sammlung
Sammlung ist eine geordnete Sammlung von Modellobjekten. Das Konzept ist sehr einfach zu verstehen. Sie werden es einfacher finden, wenn Sie sich einige Beispiele ansehen.
1. Beispiele für Bücher und Bücherregale

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

});

Nach dem Login kopieren

Es ist ganz einfach, keine Erklärung
2. Verwenden Sie fetch, um Daten vom Server abzurufen
Definieren Sie zunächst die URL im Bücherregal oben. Beachten Sie, dass die Sammlung kein urlRoot-Attribut enthält. Oder Sie definieren den Wert der URL direkt in der Abrufmethode wie folgt:

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

collection.each(function(book){

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

});

},error:function(){

alert('error');

}});

Nach dem Login kopieren

Es werden auch zwei Methoden definiert, die Rückgabewerte akzeptieren. Wenn die Daten im richtigen Format zurückgegeben werden, wird die Erfolgsmethode aufgerufen. Die Fehlermethode wird aufgerufen. Natürlich sieht auch die Fehlermethode aus. Fügen Sie die gleichen formalen Parameter wie die Erfolgsmethode hinzu.
Das entsprechende Rückgabeformat von BookShelf lautet wie folgt: [{'title':'book1'},{'title':'book2'}....]
3. Reset-Methode
Diese Methode muss mit dem oben genannten Abruf koordiniert werden. Nachdem die Sammlung die Daten abgerufen hat, ruft sie die Reset-Methode auf. Sie müssen also die Reset-Methode in der Sammlung definieren oder die Reset-Methode binden. Hier ist eine Demo mit Bindung:

bookShelf.bind('reset',showAllBooks);

showAllBooks = function(){

bookShelf.each(function(book){

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

});

}

Nach dem Login kopieren

Der Bindungsschritt muss vor dem Abruf durchgeführt werden.
Der vollständige Code für die Sammlung ist unten angegeben und erfordert serverseitige Unterstützung. Der serverseitige Aufbau wird später geschrieben.

<!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>

Nach dem Login kopieren

Anwendungsbeispiele für Modell und Sammlung im Backbone.js-Framework_Grundkenntnisse