Web-Frontend
js-Tutorial
Anwendungsbeispiele für Modell und Sammlung im Backbone.js-Framework_Grundkenntnisse
Anwendungsbeispiele für Modell und Sammlung im Backbone.js-Framework_Grundkenntnisse
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>
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;
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'));
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'));
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());
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。
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:''}); //根据验证规则，弹出错误提示。
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');
}});
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'));
});
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');
}});
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){
​//将book数据渲染到页面。
});
}
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){
​//将book数据渲染到页面。
});
}
//上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS
Dec 17, 2023 pm 06:55 PM
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen
Dec 18, 2023 pm 03:39 PM
Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
