Backbone.js 如何创建模型

模型是任何JavaScript应用程序的核心，包含交互数据以及与之相关的大部分逻辑：转换、验证、计算属性和访问控制。

通过扩展 Backbone.Model 可以简单地创建一个模型。

var Geek = Backbone.Model.extend({
});

实例化模型： 使用“new”关键字实例化模型。

var geek = new Backbone.Model.extend();

在本文中，我们将了解以下的backbone.js模型：

get() [ model.get(attribute) ]
set() [ model.set(attribute) ]
unset() [ model.unset(attribute) ]
escape() [ model.escape(attribute) ]
示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
  
    <script type="text/javascript"> 
        var Geek = Backbone.Model.extend({ 
            initialize: function () { 
                document.write("Welcome to GeeksforGeeks"); 
            }, 
        }); 
  
        var geek = new Geek(); 
    </script> 
</head> 
  
<body></body> 
  
</html>

输出：

Backbone.js 如何创建模型

所以， initialize() 在你创建一个模型实例时被触发（模型，集合和视图的工作方式相同）。它类似于类中的构造函数。

让我们详细了解不同的模型。

获取： model.get(attribute)。用于从模型中获取属性的值。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
        type="text/javascript"> 
    </script> 
  
    <script type="text/javascript"> 
        Learner = Backbone.Model.extend({ 
  
            defaults: { 
                name: 'mahesh', 
                age: 19, 
                position: 'JavaScriptDeveloper' 
            }, 
        }); 
  
        var Geek = new Learner(); // New object is created 
  
        // Name is displayed 
        document.write("name: ", Geek.get('name'), "<br/>"); 
          
        // Age is displayed 
        document.write("age: ", Geek.get('age'), "<br/>"); 
          
        // Position is displayed 
        document.write("position: ", Geek.get('position'), "<br/>"); 
          
        var geek = new Geek(); 
    </script> 
</head> 
  
<body></body> 
  
</html>

输出：

Backbone.js 如何创建模型

Set: model.set(attributes,[options]): 它用于更新或设置键的值。

示例:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
        var Geek = Backbone.Model.extend(); 
        var learner = new Geek(); 
        learner.set({ fname: "Mahesh ", lname: "Gaikwad" }); 
        document.write("Name of the learner: ", 
            learner.get("fname"), 
            learner.get("lname")); 
    </script> 
</head> 
  
<body></body> 
  
</html>

输出：

Backbone.js 如何创建模型

Unset: model.unset(attribute, [options]): 删除方法 **** 通过从内部属性哈希表中删除来删除属性。

示例:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
        var Organisation = Backbone.Model.extend(); 
        var organisation = new Organisation(); 
        organisation.set({ org_name: "gfg.org" }); 
        document.write( 
            "<b>Before using unset method , Organisation name is:</b> ", 
            organisation.get("org_name") 
        ); 
        organisation.unset("org_name"); 
        document.write("<br>"); 
        document.write( 
            "<b>After unset, Organisation name is:</b>", 
            organisation.get("org_name") 
        ); 
    </script> 
</head> 
  
<body></body> 
  
</html>

输出：

Backbone.js 如何创建模型

逃避： model.escape(attribute) Backbone.js的 escape() 模型类似于get函数，但它返回模型属性的HTML转义版本。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript"> 
     </script> 
    <script type="text/javascript"> 
        var Student = Backbone.Model.extend(); 
        var student = new Student(); 
        student.set({ name: "Mahesh Gaikwad" }); 
        document.write(student.escape("name")); 
    </script> 
</head> 
  
<body></body> 
  
</html>

输出：

Backbone.js 如何创建模型