資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在Backbone.js中建立模型？
Backbone.js是一個流行的JavaScript框架，允許開發者建立動態和互動式Web應用程式。Backbone.js的主要優勢之一是其構建模型的能力，這些模型可用於儲存和修改資料。在本文中，我們將瞭解如何在Backbone.js中構建模型以及如何將其應用於Web應用程式。
建立模型
在Backbone.js中建立模型之前，首先需要使用Backbone.Model類指定一個新的模型。以下是如何建立一個名為“Person”的簡單模型的示例：
var Student = Backbone.Model.extend({
defaults: {
name: '',
weight: 0
}
});
在這個例子中，我們建立了一個名為“Person”的新模型，包含兩個預定義屬性“name”和“age”。如果這些屬性未設定，則這些屬性的值將分別設定為空字串和0。
初始化模型
定義模型後，可以透過呼叫“new”關鍵字和模型名稱來建立它的新例項。例如：
var john = new Student();
這將建立一個“Person”模型的新例項，“name”和“age”屬性設定為其預設值。
模型的建構函式 `Object() { [native code] }` 也可以透過接收包含這些值的 物件作為引數來用特定值初始化模型。例如：
var jane = new Student({name: 'Jane', weight: 25});
這將建立一個“Student”模型的新例項，“name”設定為“Jane”，“weight”設定為25。
訪問模型屬性
建立模型例項後，可以使用“get”方法訪問其屬性。例如：
console.log(john.get('name'));
console.log(jane.get('name'));
示例
以下是完整的實現：
<html>
<head>
<title>Example of Backbone.js</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbonemin.js"></script>
</head>
<body>
<div id= "name1"></div>
<div id= "name2"></div>
<script>
var Student = Backbone.Model.extend({
defaults: {
name: '',
weight: 0
}
});
var john = new Student({name: 'john'});
var jane = new Student({name: 'Jane', weight: 25});
document.getElementById("name1").innerHTML = "First Person name is: " + john.get('name');
document.getElementById("name2").innerHTML = "Second Person name is: " + jane.get('name');
</script>
</body>
</html>
輸出
First Person name is: john Second Person name is: Jane
也可以使用“set”方法設定屬性的值。例如：
john.set('name', 'John');
console.log(john.get('name'));
示例
<html>
<head>
<title>Example of Backbone.js</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbonemin.js"></script>
</head>
<body>
<div id= "name"></div>
<script>
var Student = Backbone.Model.extend({
defaults: {
name: '',
weight: 0
}
});
var john = new Student();
john.set('name', 'John');
document.getElementById("name").innerHTML = "Student name is: " + john.get('name');
</script>
</body>
</html>
輸出
Student name is: John
向模型新增驗證
可以使用Backbone.js向模型新增驗證，以確保它們包含的資料格式正確。這可以透過在模型上定義“validate”方法來實現。例如：
var Student = Backbone.Model.extend({
defaults: {
name: '',
weight: 0
},
validate: function(attributes) {
if (!attributes.name) {
return 'Name is required';
}
if (attributes.weight < 0 || attributes.weight > 120) {
return 'Weight must be between 0 and 120';
}
}
});
此示例中的“validate”方法驗證“name”屬性不為空，“age”屬性在0到120之間。如果一個或兩個條件都不滿足，“validate”方法將返回錯誤訊息。
然後可以使用“set”方法設定模型屬性，並檢查驗證是否成功。例如：
var john = new Student(); john.set({name: 'John', weight: 25}, {validate: true}); console.log(john.validationError);
當我們用有效屬性設定John的屬性時，驗證透過，不會丟擲錯誤。
var john = new Student(); jane.set({name: 'John', weight: 205}, {validate: true}); console.log(jane.validationError);
當我們用一些無效屬性設定John的屬性時（這裡，weight大於120），驗證失敗，並且顯示錯誤訊息。
示例
<html>
<head>
<title>Example of Backbone.js</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbonemin.js"></script>
</head>
<body>
<script>
var Student = Backbone.Model.extend({
defaults: {name: '', weight: 0},
validate: function(attributes) {
if (!attributes.name) {
return 'Name is required';
}
if (attributes.weight < 0 || attributes.weight > 120) {
return 'Weight must be between 0 and 120';
}
}
});
var john = new Student();
john.set({name: 'John', weight: 205}, {validate: true});
document.write(john.validationError);
</script>
</body>
</html>
輸出
Weight must be between 0 and 120
向模型新增自定義方法
還可以向模型新增自定義方法以執行特定任務。例如：
greet: function() { console.log('Hello, my name is ' + this.get('name')); } });
示例
<html>
<head>
<title>Example of Backbone.js</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbonemin.js"></script>
</head>
<body>
<script>
var Student = Backbone.Model.extend({
defaults: {name: '', weight: 0},
greet: function() {
document.write('Hello, my name is ' + this.get('name'));
}
});
var john = new Student({name: 'John'});
john.greet();
</script>
</body>
</html>
輸出
Hello, my name is John
在這個例子中，我們向“Person”模型添加了一個“greet”方法，該方法將訊息記錄到控制檯。
結論
Backbone.js模型是用於操作和儲存Web應用程式中資料的強大工具。透過建立模型，可以設定預設值、驗證資料以及新增自定義方法來執行特定任務。學習如何建立模型後，就可以使用Backbone.js構建更復雜和動態的應用程式。
228 次瀏覽
