Backbone.js框架中简单的View视图编写学习笔记

传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。

index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到

1.js

var ListView = Backbone.View.extend({
 //el: $('.wrapper'),

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

var listView = new ListView({el: $('.wrapper')});

执行：

$duo 1.js

知识点说明

  • el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
  • initialze：调用new时，会触发的函数调用，类似构造函数。
  • render：触发DOM操作，浏览器会渲染
  • 最后一句，说明在new时，可以传递参数

疑惑
如果写成 new ListView({el: '.wrapper'})也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。

  • $el和$()
  • $(this.el) 等价于 this.$el
  • $(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement
如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true

事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。
2.js

var ListView = Backbone.View.extend({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
 }
});

var listView = new ListView();

执行：

$duo 2.js

知识点

  • this.counter：内部使用的数据，可以initialize中初始化
  • events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。

模板

在index.html中加入：

<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

在View的声明中修改：

events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

修改addItem：

addItem: function() {
 this.counter++;
 this.$('ul').append(this.template({counter: this.counter}));
}

同理，这里的模板可以替换为任何第三方模板引擎。
比如：artTemplate

var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...
赞 (0)

相关推荐

  • Backbone中View之间传值的学习心得

    Backbone中View之间传值的学习心得

    Backbone中的View就是用来展示由Model层传出的数据,或者在View里产生的一些数据,包括输入框中输入等产生的数据,由当前View传递到另外一个View层里,应该怎么办呢,我之前读到一位博主<Backbone View的三种通信方式 >写的尤为的清晰,在我实际的项目中,常常使用的也就是最后一种方式. 嘿嘿,分享知识是一件快乐的事情,我就直接借鉴表述一下如下: 直接用 Backbone 作为事件注册机, 代码如下: var ApplicationView = Backbone.Vie

  • Backbone View 之间通信的三种方式

    Backbone View 之间通信的三种方式

    在上篇文章给大家介绍了Backbone中View之间传值的学习心得.本文重点给大家介绍Backbone View 之间通信的三种方式. 掌握一个 MVC 框架,最关键的一节就是掌握如何在各个 View 之间通信.之前用 Angular 时,觉得基于事件的通信方式 ($on, $emit, $boardcast) 或者 基于 service 的方式都非常好用.转战 Backbone 之后,由于对 Backbone 的事件机制理解不够且使用非常灵活,一直没找到一个好的通信方式.直到看见这篇文章,作者

  • 简单了解Backbone.js的Model模型以及View视图的源码

    简单了解Backbone.js的Model模型以及View视图的源码

    Backbone.Model 今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分,包含着页面展示内容的数据,还有围绕着数据操作的各种 转换,校验,计算 ,权限控制,服务端交互等等操作,你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model var People = Backbone.Model.extend({ }); var Man = People.

  • 实例讲解JavaScript的Backbone.js框架中的View视图

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

  • Backbone.js框架中简单的View视图编写学习笔记

    传统上用jQuery操作DOM,就类似C语言中的goto语句,随着项目复杂度增大,会越来越难以维护. 关于MVC(以及后续的MVP,MVVM),网上资源很多,就不展开.我们直接用代码来操练. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Backbone.js框架中Model与Collection的使用实例

    Model 关于backbone,最基础的一个东西就是model,这个东西就像是后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该是和后端的model有相同的属性(仅是需要通过前端来操作的属性). 下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西. 首先定义一个html的页面: <!DOCTYPE html> <html> <head> <title>the5fire-backbone-model&l

  • 全面解析JavaScript的Backbone.js框架中的Router路由

    Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效. 定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释. 下面我们来定义一个 Router: <script> var AppRouter = Backbone.Router.extend({ routes: { "*actions": &

  • 详解Backbone.js框架中的模型Model与其集合collection

    什么是 Model Backbone 的作者是这样定义 Model 的: Model 是任何一个 web 应用的核心,它包含了交互的数据以及大部分的逻辑.例如:转化.验证.属性和访问权限等. 那么,我们首先来创建一个Model: Person = Backbone.Model.extend({ initialize: function(){ alert("Welcome to Backbone!"); } }); var person = new Person; 上述代码中,我们定义了

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

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

    1.简介 最近在做一个大型网上银行项目前端的优化,需要使用一个胖客户端的优化,大概思路就是前端通过Ajax 请求去后端获取数据,以Jason的格式返回,然后显示在页面上.由于这个系统非常庞大,胖客户端方案难免需要在客户端写大量的JS代码.我想对于任何团队来说,大量的,非结构化的代码维护起来都非常的不方便.所以BackBone进入了我的视线. 它提供了一种途径可以让你结构化你的JS代码,让你以面向对象的方式来组织你的前端JS代码.这就好比我们在前端应用Domain Driven Design. 我

  • JavaScript的Backbone.js框架的一些使用建议整理

    Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序. 当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据. 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序,包括在HTML UI,Ja

  • 讲解JavaScript的Backbone.js框架的MVC结构设计理念

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的鼻祖.它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互. 简而言之,Backbone是实现了web前端MVC模式的js库 什么是MVC? MVC:后端服务器首先(过程1)

随机推荐