Backbone.js 解释内置事件

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

事件允许我们直接将事件监听器附加到el、自定义选择器、相关选择器和相关选择器，以及如果没有提供选择器，也可以附加到el。事件由键值对表示：

"<eventName> <selector>" : "<callbackFunction>"

内置事件是在 Backbone.js 库中已经预定义的事件，可以直接使用。支持多种 DOM 事件类型，包括 click、submit、mouseover、dblclick 等。

语法：

events: {
    'click button: 'function1',
    'keypress label': 'function2',
},

示例1： 下面的代码演示了如何在视图中应用更改、 更改Id 事件。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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>Explain Built-in Events in Backbone.js.</h3>
    <div id="div-1">
        Enter some text to trigger the First Function: 
        <input type="text"></input>
    </div>
    <div id="div-2">
        Enter some text to trigger the Second Function: 
        <input type="text" id="hel"></input>
    </div>
 
    <script type="text/javascript">  
        var DemoView1 = Backbone.View.extend({  
            events: {
                'change input': 'demoFunc1',  
            },  
            demoFunc1: function () {  
                console.log("Function 1 is called.") 
            },  
        });  
        var DemoView2 = Backbone.View.extend({  
            events: {  
                'change #hel': 'demoFunc2'  
            },  
            demoFunc2: function () {  
                console.log("Function 2 is called.") 
            },  
        });  
        var demo1 = new DemoView1({el: '#div-1'});  
        var demo2 = new DemoView2({el: '#div-2'});  
    </script>  
</body>
</html>

输出：

Backbone.js 解释内置事件

示例2： 下面的代码演示了如何实现路由事件以及如何在 Router 内定义它。

HTML

<!DOCTYPE html>
<html>
<head>
    <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>Explain Built-in Events in Backbone.js.</h3>
    <div id = "content">
        <button><a href="#/first_link">
              Click for First Route</a>
          </button>
        <button><a href="#/second_link">
              Click for Second Route</a>
          </button>
    </div>
 
    <script type="text/javascript">
 
        var demoRouter = Backbone.Router.extend({
            routes: {
                'first_link': 'first_route',
                'second_link': 'second_route'
            },
            first_route: function () {
                console.log("First Route called.");
            },
 
            second_route: function () {
                console.log("Second Route called.");
            },
        });
        var mydemo = new demoRouter({});
 
        Backbone.history.start();
    </script>
</body>
</html>

输出：

Backbone.js 解释内置事件