Backbone的其实感觉上上手很难,大概在一年前就想实践下,结果总是没有付诸行动,这次需求中狠狠心决定一定要使用一次看看,感受下。

可是第一步真的比较困难,因为直接看API好像没有感觉就在网上找实例看看,但是我只能说有些人在给实例的时候根本就没有考虑过新手的感受。

我曾经在看完一些教程之后的迷惑:

1. 在view中this.model到底代表的是什么?

2. template如何写?

其实这两个问题很简单,可能就是一句话的事情,也许是我对于Backbone了解很少的缘故,我当时确实不明白。

下面上一点代码:

Model:

var TrendModel = Backbone.Model.extend({
urlRoot: '/price/trend.json'
});
var trendM = new TrendModel();

这个Model很简单就是提供一个链接,根据这个链接可以获取价格趋势的数据

View:

var TrendView = Backbone.View.extend({
el: $('.js-report-tr'),
template: _.template($('#trendTemplate').html()),
events: {
// 单引号很重要,不然识别不了
'click .js-trend-show': 'show'
},
initalize: function() {
// 确保this的正确作用域
_.bindAll(this, 'render', 'show');
this.model.bind('change', this.render);
},
render: function() {
var el = this.template(this.model.attributes);
$(this.el).parent().append(el);
return this;
},
show: function() {
// 执行搜索操作,传递参数
this.model.fetch({
data: $.param({
comId: 111
})
});
}
}); var trendV = new TrendView({
model: trendM
});

看最后的3行,你就明白了model是指的什么了,其实model就是在创建View实例对象的时候传递的一个参数,而这个参数就是我上面定义的Model。

View包括几个部分:

el:我感觉就像一个容器或者说是执行环境上下文,应该怎么描述呢?举个例子吧,在backbone的view中我们经常这样查找元素

this.$el.find('.xx')

其实对应于jquery就是

$('.js-report-tr').find('.xx')

events:事件绑定,这里其实还是和el有点关联,例如在整个文档中有多个.js-trend-show元素,我们绑定事件的时候实际上是给.js-report-tr下的.js-trend-show元素绑定事件,其他的不在.js-report-tr的.js-trend-show都不会被绑定对应的事件。

注意点:

1. 事件方法名要加单引号,不然识别不了。

2. View中事件绑定应该使用的是事件代理。

template:模板,我当时看过几个模板的例子,但是就不知道模板是什么语言规则,后来其实我觉得自己是有点二了,实际模板就是一个js配合html的产物。backbone的模板有点像java混合jsp的感觉,有点混乱的感觉,当然好像<%%>可以自定义成其他的符号。

在使用Backbone中其实也遇到了一点问题

1.  model.fetch操作是否将model的值设置成undefined

最开始的时候使用model.fetch后,在render中获取this.model是undefined,当时非常郁闷,想说get请求之后model被清空,那get干什么啊,后来查了下资料

使用_.bindAll(this,'render'),确保this的正确作用域。

好像有点混乱,下面做个总结吧

其实Backbone还有Router,Collections没有使用,所以对于Backbone只能是初步有了个了解,Backbone适用于单页面应用,我的实践其实有点纯粹想实验一下。

在这个实践中并没有体现Backbone的优势,但是依然可以让代码看起来更加模块化。

Backbone的一点使用心得的更多相关文章

  1. BUI Webapp用于项目中的一点小心得

    接触BUI也有一段时间,也用在了移动端的项目开发中,总的来说,该框架用起来也挺灵活的,控件可以自由定制,前提是自己能认真地学习该框架的api,因为api里面说的东西比较详细,如果没有仔细看的,可能有些 ...

  2. Unity5的AssetBundle的一点使用心得

    昨天一位朋友在我这里留言,想让我写点Unity5的AssetBundle心得.于是我就看了相关的介绍,和自己确切的做了一次.下面来谈谈所谓的心得. 如果你觉得自己对AssetBundle不熟悉,建议先 ...

  3. ASP.NET MVC Autofac依赖注入的一点小心得(包含特性注入)

    前言 IOC的重要性 大家都清楚..便利也都知道..新的ASP.NET Core也大量使用了这种手法.. 一直憋着没写ASP.NET Core的文章..还是怕误导大家.. 今天这篇也不是讲Core的 ...

  4. python+tesseract验证码识别的一点小心得

    由于公司需要,最近开始学习验证码的识别 我选用的是tesseract-ocr进行识别,据说以前是惠普公司开发的排名前三的,现在开源了.到目前为止已经出到3.0.2了 当然了,前期我们还是需要对验证码进 ...

  5. Qt使用com组件的一点小心得(使用Qt自带的工具dumpcpp生成.h和.cpp文件)

    这几天工作中要用到Qt调用com组件,主要用到的类型有dll和ocx,使用他们的方法很简单:1.将com组件注册到系统中.2.使用Qt自带的工具dumpcpp将com组件生成cpp和头文件.3.然后就 ...

  6. 新手学分布式 - Envoy Proxy XDS Server动态配置的一点使用心得

    Envoy Proxy 动态API的使用总结 Envoy Proxy和其它L4/L7反向搭理工具最大的区别就是原生支持动态配置. 首先来看一下Envoy的大致架构 从上图可以简单理解:Listener ...

  7. 学习R语言的一点小心得

    1.目前R 语言处于入门阶段吧,能够执行一些简单的模型了,还是有收获的. 但是在跑模型的时候经常遇到各种各样的错误,最常见的错误就是数据带入模型之后,数据的类型不对,因此模型跑不下去,因此说,利用he ...

  8. 【Unity3d游戏开发】unity3D OnTriggerEnter和OnCollisionEnter的一点个人心得(转载)

    此文为转载,因为最近在做U3D,有一些概念弄得不是很清楚,看到这篇博客讲的不错,就转载过来了,方便自己随时查看. ------------------------------------------- ...

  9. 使用Vue.js时,对Chrome控制台的一点小心得

    之前对Chrome控制台的console.log()输出没太放心上,其实仔细研究后,对工作效率有显著的提示.看下面的五段代码: console.log(''); console.log(typeof ...

随机推荐

  1. 115个Java面试题和答案——终极列表(上)

    本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...

  2. 微信小程序-提示框

    提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', dur ...

  3. CocoaPods使用 主要带图。转载。

    原文地址 快速更新,不需要查找更新库 命令:pod update  --verbose --no-repo-update 虽然网上关于CocoaPods安装教程多不胜数,但是我在安装的过程中还是出现了 ...

  4. codeforces 748E Santa Claus and Tangerines

    E. Santa Claus and Tangerines time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  5. 插件开发--BE插件开发

    U9的插件主要分为3种,即(1)BE插件(2)UI插件(3)BP/SV插件 1.新建类库解决方案 2.新建插件类,并引用以下dll,UBF安装目录U9.VOB.Product.UBF\UBFStudi ...

  6. iOS - SQLite 数据库存储

    1.SQLite 数据库 SQLite 是一种轻型的嵌入式数据库,安卓和 iOS 开发使用的都是 SQLite 数据库.它占用资源非常低,在嵌入式设备中,可能需要几百 K 的内存数据就够了.他的处理速 ...

  7. Dom 概览

    前言 我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有 ...

  8. /proc 【虚拟文件系统】

    在安装新硬件到 Linux 系统之前,你会想要知道当前系统的资源配置状况. Linux 将这类信息全集中在 /proc 文件系统下./proc 目录下的文件都是 Linux 内核虚拟出来的,当你读取它 ...

  9. iOS 开发之崩溃日志分析

    1. (js 与webview 交互崩溃)-[CFRunLoopTimer release]: message sent to deallocated instance 0x62398f80 I've ...

  10. stm32定时器中断类型分析

    一直在用的stm32定时器的中断都是TIM_IT_Update更新中断,也没问为什么,直到碰到有人使用TIM_IT_CC1中断,才想到这定时器的中断类型究竟有什么区别,都怪当时学习stm32的时候不够 ...