`
hudeyong926
  • 浏览: 2032661 次
  • 来自: 武汉
社区版块
存档分类
最新评论

Backbone View入门

 
阅读更多

Backbone 是一个 JavaScript 框架,可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化,所涉及到的概念有  View, Event, Model, Collection 和 Router,所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相,因此第一个例子只需用到 View,其他的玩艺暂且搁置。

Backbone 强依赖于 Underscore,jQuery 是可选的,不过为操作 DOM 方便一般都会引用到 jQuery。

最简单的例子,分两步走:

1. Backbone.View.extend(obj) 创建一个 View 类型
2. 创建上一步得到的 View 的实例,实例化时将会调用前一步 obj.initialize() 方法

<!DOCTYPE html>
<html>
     <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
     </head>
     <body>
         <div id="container">Loading...</div>
     </body>
 </html>
  
 <script>
     var AppView = Backbone.View.extend({
         el: '#container',
         initialize: function(options) {
                 this.render();
         },
         render: function() {
                 this.$el.html("Hello World");
         }
     });
  
    //上面等于是创建了 AppView 类,还需实例化才行
    setTimeout(function(){
      var appView = new AppView();
    }, 1000);
  
 </script>

运行上面的代码,会发现 Loading... 在一秒后被替换成了 Hello World。走通。

 

有了上头的真切体验,我们才可以再进一步,使用行间模板和页面中声明的模板,模板就会触碰到值的填充,至此隐约也会感觉到 Model 在向我们招手了。

我们在构造 AppView 时可以传入以上的属性,比如传入 el 属性,就写成

var appView = new AppView({el: $('#container')});

 这样前面的 AppView 内就可以不用声明 el 属性了。你也可以同样的方式传入 model, id 等属性,属性声明在 View 的定义比较清晰,倘若要 View 的公用性就可在构造时传入属性,这是后话。

 

Backbone 的对象在初始化之后首先被执行的是 initialize 方法,初始化方法中可能要调用父类的初始化,则在  initialize 方法中头行加上

this.constructor.__super__.initialize.apply(this);

这在要建立自己更深层次的类关系时会有用到,特别是非默认构造。

 

 
分享到:
评论

相关推荐

    backbone.js入门教程

    ### Backbone.js 入门知识点详解 #### 一、初识 Backbone.js Backbone.js 是一款轻量级的 JavaScript 框架,它为 Web 开发提供了 MVC(Model-View-Controller)架构的基础组件。该框架的目标是简化客户端应用的...

    backbone 入门指南

    ### Backbone.js入门指南知识点概述 #### 一、为什么需要Backbone.js? Backbone.js是一个轻量级的JavaScript库,它提供了MVC(Model-View-Controller)架构模式的基础实现,帮助开发者更好地组织复杂的Web应用...

    Backbone 文档

    这个文档将带你走进Backbone的世界,通过一个开发入门的例子,帮助你了解如何有效地利用这个工具类库。 首先,Backbone的核心组件包括Model、View、Collection和Router。Model是数据存储的基本单元,它负责管理和...

    JavaScript的Backbone.js框架入门学习指引_.docx

    ### JavaScript的Backbone.js框架入门学习指引 #### 一、简介与背景 随着Web应用程序的复杂度不断提高,传统的JavaScript编程模式越来越难以满足大型项目的开发需求。为了更好地管理和组织前端代码,许多开发者...

    backbonejs-978-1-7832-8425-2:Backbone Marionette 入门

    《Backbone.js Marionette 入门》是一本专注于JavaScript库Backbone.js的扩展框架Marionette的教程。这本书旨在帮助开发者深入理解如何有效地构建大型、复杂、可维护的单页应用(Single-Page Applications,SPA)。...

    Backbone.Marionette.pdf

    《Backbone.Marionette.js: A Gentle Introduction》不仅是一本入门书籍,更是进阶开发者不可多得的参考资料。通过详细的示例和实践指南,本书帮助读者掌握了Marionette的核心概念和最佳实践,为构建高质量的单页面...

    First Backbone.js

    **Backbone.js 入门详解** Backbone.js 是一个轻量级的JavaScript库,它为构建复杂的、数据驱动的Web应用程序提供了结构和组织。这款框架以其强大的模型-视图-控制器(MVC)架构模式而闻名,使得前端开发更加有序且...

    Backbone素材资料

    首先,`Backbone入门基础.mmap`可能是MindMap或类似的学习工具创建的文件,它可能包含了Backbone.js的基本概念、架构和关键组件的概览。这可能包括: 1. **Model**:Backbone中的核心数据模型,用于存储和管理应用...

    hello-react-backbone:Backbone和ReactJS的整合,该项目使用了Backbone的Model和ReactJS进行整合使用,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子

    #Hello-React-Backbone**目的:**做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。**实现内容:**通过传递的json数据构建...

    BACKBONE.JS 简单入门范例

    本文将从Backbone.js的模型(Model)、视图(View)、集合(Collection)三个方面来探讨其入门知识,并通过一个简单示例来说明Backbone.js的使用。 ### Model Model是Backbone框架的核心,主要负责数据和业务逻辑。...

    backboneApi英文版pdf

    - **教程列表**:包含了多个教程,覆盖了从入门到高级的各种主题。 - **真实案例**:展示了多个实际项目中使用Backbone的成功案例。 #### 七、下载与依赖 Backbone.js提供了不同版本的下载链接,以及对其所需依赖的...

    Backbone-Tutorials基础教程

    首先,视图(view)是框架中用于控制界面元素的结构,它们可以绑定DOM元素到应用程序的数据模型。Backbone视图提供了一个"el"属性,这个属性可以用来指定视图对应的DOM元素。视图可以加载模板来渲染数据,监听事件,并...

    backbone-collections-view:Backbone.JS 集合和视图快速教程和快速入门

    在“backbone-collections-view-master”这个压缩包中,包含了具体的代码示例,你可以通过学习这些例子来更好地理解Backbone.Collections和Backbone.Views的用法。这些示例通常会展示如何创建和使用集合,如何处理...

    开始学习 Backbone

    **Backbone.js 入门教程** Backbone.js 是一个轻量级的JavaScript库,它为构建复杂的Web应用程序提供了一个强大的框架。它强调模型-视图-控制器(MVC)架构,帮助开发者组织代码,提高可维护性和可扩展性。在这个...

    backbone-marionette-stickit-example:使用 Backbone.Marionette 和 Backbone.Stickit 的简单示例

    1. **Backbone.js**:它定义了Model、View、Collection和Router等核心概念,用于处理数据、视图展示和路由。在本例中,Backbone.js提供了基础的数据管理和事件处理机制。 2. **Marionette.js**:Marionette是...

    JavaScript的Backbone.js框架入门学习指引

    2. **Backbone View**: View负责展示数据和处理用户交互。它监听Model的change事件,并在数据变化时自动更新界面,减少了手动操作DOM的需要。View还允许通过声明性事件绑定,如`events`属性,简化UI事件的管理。 ...

Global site tag (gtag.js) - Google Analytics