Detaillierte Erläuterung des Modellmodells und seiner Sammlung im Backbone.js-Framework_Grundkenntnisse

Was ist ein Modell?
Der Autor von Backbone definiert Modell wie folgt:

Das Modell ist der Kern jeder Webanwendung, es enthält interaktive Daten und den größten Teil der Logik. Zum Beispiel: Konvertierung, Verifizierung, Attribute und Zugriffsrechte usw.
Erstellen wir also zunächst ein Modell:

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

var person = new Person;

Im obigen Code definieren wir ein Modell mit dem Namen „Person“ und nach der Instanziierung erhalten wir „Person“. Jedes Mal, wenn Sie ein Modell instanziieren, wird die Methode initialize() automatisch ausgelöst (dieses Prinzip gilt auch für Sammlungen und Ansichten). Natürlich ist die Verwendung der Methode initialize() beim Definieren eines Modells nicht zwingend erforderlich, aber wenn Sie Backbone verwenden, werden Sie feststellen, dass sie unverzichtbar ist.

Modelleigenschaften festlegen
Jetzt möchten wir einige Parameter übergeben, um die Eigenschaften des Modells beim Erstellen der Modellinstanz festzulegen:

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

Modellattribute abrufen
Mit der get()-Methode von Model können wir die Eigenschaften abrufen:

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"

Standardeigenschaften des Modells festlegen
Manchmal möchten Sie, dass das Modell bei der Instanziierung einige Standardattributwerte enthält. Dies kann durch Definieren des Standardattributs des Modells erreicht werden:

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"

Modellattribute verwenden
Sie können Methoden im Modell anpassen, um die Eigenschaften im Modell zu verwenden. (Alle benutzerdefinierten Methoden sind standardmäßig öffentlich)

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"

Änderungen in den Modelleigenschaften anhören
Gemäß dem Backbone-Mechanismus können wir jedes Attribut des Modells überwachen. Als nächstes versuchen wir, ein Attribut des Modells in der zu überwachenden Methode initialize() zu binden, wobei wir den Attributnamen als Beispiel nehmen:

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

Durch den obigen Code wissen wir, wie wir ein bestimmtes Attribut des Modells überwachen können. Angenommen, wir müssen alle Eigenschaften des Modells überwachen und dann 'this.on("change", function(model){});

Dateninteraktion zwischen Server und Modell
Wie im vorherigen Artikel erwähnt, enthält Model interaktive Daten. Eine seiner Funktionen besteht also darin, Daten vom Server zu übertragen und mit dem Server zu interagieren. Nun gehen wir davon aus, dass es auf der Serverseite einen MySQL-Tabellenbenutzer gibt. Die Tabelle enthält drei Felder: ID, Name und E-Mail. Die Serverseite verwendet den REST-Stil für die Kommunikation mit dem Front-End und verwendet für die Interaktion die URL: /user. Unser Modell ist definiert als:

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

Erstellen Sie ein Modell
Jedes Modell im Backbone verfügt über eine Attribut-ID, die eins zu eins den serverseitigen Daten entspricht. Wenn wir dem MySQL-Tabellenbenutzer auf der Serverseite einen neuen Datensatz hinzufügen möchten, müssen wir nur ein Modell instanziieren und dann die Methode save() aufrufen. Zu diesem Zeitpunkt ist die Attribut-ID der Modellinstanz leer, was bedeutet, dass das Modell neu erstellt wurde, sodass Backbone eine POST-Anfrage an die angegebene URL sendet.

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

Derzeit gibt es einen zusätzlichen Eintrag mit dem Namen StephenLee und der E-Mail-Adresse stephen.lee@mencoplatform.com in der Benutzertabelle von MySQL auf der Serverseite.

Holen Sie sich ein Model
Wir haben gerade ein Modell erstellt und in der serverseitigen Datenbank gespeichert. Angenommen, der vom Server zurückgegebene ID-Attributwert ist 1. Zu diesem Zeitpunkt können wir den ID-Wert zum Speichern verwenden Datenabruf. Wenn wir eine Modellinstanz mit dem Attributwert „id“ initialisieren, sendet Backbone über die fetch()-Operation eine GET-Anfrage an die angegebene URL.

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

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

Ein Modell aktualisieren
Wenn wir den gespeicherten Benutzerdatensatz ändern und den bekannten ID-Wert verwenden müssen, verwenden wir auch die Methode save(), aber da die ID zu diesem Zeitpunkt nicht leer ist, sendet Backbone eine PUT-Anfrage an die angegebene URL.

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

Ein Modell löschen
Wenn wir Datensätze in der Datenbank löschen müssen, verwenden Sie die Methode destroy() mit dem bekannten ID-Wert. Zu diesem Zeitpunkt sendet Backbone einen DELETE-Vorgang an die angegebene URL.

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

Was ist Sammlung?
Kurz gesagt ist die Sammlung in Backbone eine geordnete Sammlung von Modellen. Sie kann beispielsweise in den folgenden Situationen verwendet werden:

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

Sammlung verwendet im Allgemeinen nur den gleichen Modelltyp, aber das Modell kann zu verschiedenen Sammlungstypen gehören, wie zum Beispiel:

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

Eine Sammlung erstellen

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