2.View学习(Backbone Tutorials)

最新推荐文章于 2021-09-17 00:24:16 发布

zhexiao27

最新推荐文章于 2021-09-17 00:24:16 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

分类专栏： BACKBONE

本文链接：https://blog.youkuaiyun.com/andybegin/article/details/8886807

BACKBONE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍Backbone.js视图的基础用法，包括初始化、设置DOM元素、加载模板及监听事件等关键步骤，并通过搜索框实例展示具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

What is a view?

Backbone views are used to reflect what your applications' data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically Underscore.js's _.template.

We will be using jQuery 1.8.2 as our DOM manipulator. It's possible to use other libraries such as MooTools or Sizzle, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.

For the purposes of this demonstration, we will be implementing a search box. A live example can be found on jsFiddle.

SearchView = Backbone.View.extend({

initialize: function(){

alert("Alerts suck.");

}

});

// The initialize function is always called when instantiating a Backbone View.

// Consider it the constructor of the class.

var search_view = new SearchView();

The "el" property

The "el" property references the DOM object created in the browser. Every Backbone.js view has an "el" property, and if it not defined, Backbone.js will construct its own, which is an empty div element.

Let us set our view's "el" property to div#search_container, effectively making Backbone.View the owner of the DOM element.

<divid="search_container"></div>

SearchView = Backbone.View.extend({

initialize: function(){

alert("Alerts suck.");

}

});

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

</script>

Note: Keep in mind that this binds the container element. Any events we trigger must be in this element.

Loading a template

Backbone.js is dependent on Underscore.js, which includes its own micro-templating solution. Refer to Underscore.js's documentation for more information.

Let us implement a "render()" function and call it when the view is initialized. The "render()" function will load our template into the view's "el" property using jQuery.

<label]]]]>Search</label>

</script>

<divid="search_container"></div>

SearchView = Backbone.View.extend({

initialize: function(){

this.render();

render: function(){

// Compile the template using underscore

var template= _.template( $("#search_template").html(), {} );

// Load the compiled HTML into the Backbone "el"

this.$el.html( template );

}

});

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

</script>

Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached.(注意一下加载顺序，必须先加载到template之后，我们才可以使用模板的加载)

Listening for events

To attach a listener to our view, we use the "events" attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the "el" property. Let us attach a "click" listener to our button.

<label]]]]>Search</label>