· BackboneJS环境设置_BackboneJS

BackboneJS 环境设置

Backbone.js非常容易设置和工作。本章将讨论Backbone.js库的下载和设置。 Backbone.js可以通过两种方式使用：从其官方网站下载UI库。从CDN下载UI库从其官方网站下载UI库当你打开链接http://backbonejs.org/，你会看到一个屏幕如下：正如你可以看到，有三个选择下载这个库：开发版本 - 右键单击此按钮并另存为，您将获得完整的源代码JavaScript库。生产版本 - 右键单击此按钮并保存为，你得到Backbone-min.js库文件，它是打包和gzipped。边缘版本 - 右键单击此按钮，保存为，你会得到一个未发布的版本，即开发正在进行，因此您需要使用它自己的风险。依赖 Backbonejs取决于以下javascript文件： Underscore.js：这是唯一需要包含的硬依赖。你可以从这里得到它 jQuery.js：包括此文件用于RESTful持久性，历史支持通过Backbone.Router和DOM操作与Backbone.View。你可以从这里得到它 json2.js：包括此文件以用于较旧的Internet Explorer支持。你可以从这里得到它从CDN下载UI库CDN或内容传送网络是设计为向用户提供文件的服务器网络。如果您在网页中使用CDN链接，它将托管文件的责任从您自己的服务器迁移到一系列外部服务器。这也提供了一个优点，如果您的网页的访问者已经从相同的CDN下载了Backbone.js的副本，则不必重新下载。如上所述，Backbone.js具有以下javascript的依赖性： jQueryUnderscore因此，所有上述的CDN如下：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<html>

<head>

<title>Hello World using Backbone.js</title>

</head>

<body>

<div id="container">Loading...</div>

var AppView = Backbone.View.extend({

// el - stands for element. Every view has an element associated with HTML content, will be rendered.

el: '#container',

// It's the first function called when this view is instantiated.

initialize: function(){

this.render();

// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content. Like the Hello TutorialsPoint in this case.

render: function(){

this.$el.html("Hello TutorialsPoint!!!");

}

});

var appView = new AppView();

</script>

</body>

</html>

代码注释是自解释的。更多详细信息如下：在body标签的开头有一个html代码<div id="container">Loading...</div>

打印正在加载... 接下来，我们添加了以下CDN<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

接下来我们有以下脚本： var AppView = Backbone.View.extend({

// el - stands for element. Every view has an element associated with HTML content, will be rendered.

el: '#container',

// It's the first function called when this view is instantiated.

initialize: function(){

this.render();

// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content. Like the Hello World in this case.

render: function(){

this.$el.html("<h1>Hello TutorialsPoint!!!</h1>");

}

});

var appView = new AppView();

评论是自我解释。最后一行，我们正在初始化新的AppView()。这将在div中打印“Hello TutorialsPoint”，id =“container”将此页面保存为myFirstExample.html。在您的浏览器中打开它，将会看到如下屏幕：