Backbone.js 如何从视图中访问模型的数据

Backbone.js 是一个用于组织JavaScript代码的紧凑库。它是一个MVC/MV*框架的另一个术语。如果MVC对你来说不熟悉，它简单地指的是一种设计用户界面的技术。JavaScript函数大大简化了程序用户界面的创建。Backbone.js提供了各种构建元素，帮助开发人员创建客户端的Web应用程序，包括模型、视图、事件、路由和集合。

模型是任何JavaScript应用程序的主要部分，它包含交互数据和大部分必要支持它的逻辑，包括转换、验证、计算属性和访问控制。要从视图中访问模型的数据，你需要在视图中初始化模型并创建模型的对象。

语法：

var demoModel= Backbone.Model.extend({
    initialize: function(){
        ...
    },
    ...
})
var demoView = Backbone.View.extend({
    initialize: function() {
        this.model = new demoMode;();
    },
    ...
}); 
var demo = new demoView();

示例1： 下面的代码演示了如何应用上述方法，并在JavaScript控制台中打印数据。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>How to access a models data 
          from a view in Backbone.js?</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>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>How to access a models data from
          a view in Backbone.js?</h3>
 
    <script type="text/javascript">
        var lang = Backbone.Model.extend({
            initialize: function(){
                console.log('initialized');
            },
            defaults:{
                names:['JavaScript','PHP','C++']
            }
        })
        var lang_view = Backbone.View.extend({
            initialize: function() {
                this.model = new lang();
                this.outFunc();
            },
            outFunc: function(){
                console.log(this.model.get('names'))
            }
        });
 
        var myView = new lang_view();
    </script>
</body>
 
</html>

输出：

Backbone.js 如何从视图中访问模型的数据

示例2： 下面的代码演示了如何访问模型的数据并在视图中使用它。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
          How to access a models data from 
          a view in Backbone.js?
      </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>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
          How to access a models data 
          from a view in Backbone.js?
      </h3>
 
    <script type="text/javascript">
        var lang = Backbone.Model.extend({
            initialize: function(){
                console.log('initialized');
            },
            defaults:{
                names:['JavaScript','Java','C++']
            }
        })
        var lang_view = Backbone.View.extend({
            initialize: function() {
                this.model = new lang();
                this.outFunc();
            },
            outFunc: function(){
                var values = new Array();
                values = this.model.get('names');
                console.log(
                      "Most Popular programming language is: " 
                    + values[0] + "<br>"),
                console.log(
                      "Programming language with most users is: " 
                    + values[1] + "<br>"),
                console.log(
                      "Most Popular programming language in "
                      + "competetive programming is: "
                    + values[2] + "<br>")
            }
        });
 
        var myView = new lang_view({});
    </script>
</body>
</html>

输出：

Backbone.js 如何从视图中访问模型的数据