实例讲解JavaScript的Backbone.js框架中的View视图（js viewbag）

25-03-01 10

对于实例讲解JavaScript的Backbone.js框架中的View视图感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍jsviewbag，并为您提供关于Backbone.js1.1.0发布

对于实例讲解JavaScript的Backbone.js框架中的View视图感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍js viewbag，并为您提供关于Backbone.js 1.1.0 发布，JavaScript 的 MVC 框架、Backbone.js 1.2.1 发布，JavaScript 的 MVC 框架、Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架、Backbone.js 1.2.3 发布，JavaScript 的 MVC 框架的有用信息。

本文目录一览：

实例讲解JavaScript的Backbone.js框架中的View视图（js viewbag）
Backbone.js 1.1.0 发布，JavaScript 的 MVC 框架
Backbone.js 1.2.1 发布，JavaScript 的 MVC 框架
Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架
Backbone.js 1.2.3 发布，JavaScript 的 MVC 框架

实例讲解JavaScript的Backbone.js框架中的View视图（js viewbag）

Backbone 中的 View 用来反映你 app 中 Model 的模样。它们会监听事件并作出相应的反应。接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上，而是主要讨论 View 是如何使用 javascript 模板库的，尤其是 Underscore.js's _.template。这里我们使用 jQuery 来操作 DOM 元素，当然你也可以使用其他的库，例如 MooTools 或者 Sizzle,但是 Backbone 的官方文档推荐我们使用 jQuery。接下来，我们以搜索框为例来新建一个 View：

rush:js;"> SearchView = Backbone.View.extend({ initialize: function(){ alert("Welcome to Backbone!"); } }); var search_view = new SearchView();

无论是 Model，View 还是 Collection，当被实例化时，initialize() 方法都会被自动触发。

el 属性

el 属性指的是已经在浏览器中创建好的 DOM 对象，每个 View 都有一个 el 属性，如果它未被定义，Backbone 将会自己创建一个空的 div 元素作为 el 属性。下面让我们来为 View 创建一个 el 属性，并设为 #search_containe。

rush:js;">

此时，View 的 el 属性指的是 id 为 search_container 的 div 元素。我们此时变绑定了这个 div 元素，那么任何我们希望触发的事件都必须在这个 div 元素中。

加载模板

Backbone 是强依赖于 Underscore.js 的，所以我们可以使用 Underscore.js 中的小型模板。现在，让我们添加一个 render() 方法，并且在 initialize() 中调用它，这样当 View 初始化时便会自动触发 render() 方法。这个 render() 方法将会通过 jQuery 把模板加载到 View 的 el 属性中去。

rush:js;">

var search_view = new SearchView({ el: $("#search_container") });