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. HDU1760 A New Tetris Game NP态

    A New Tetris Game Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. dubbo(转载)

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  3. 解决Spark读取Hive分区表出现Input path does not exist的问题

    假设这里出错的表为test表. 现象 Hive读取正常,不会报错,Spark读取就会出现: org.apache.hadoop.mapred.InvalidInputException: Input ...

  4. MySQL5.0+提示字段没有默认值(doesn’t have a default value)的解决方法

    方法一: 打开my.ini,查找  sql-mode=”STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION” 修改为  sql ...

  5. DOM笔记

    1.监听div内容修改 1.1 DOM2级中的mutation(变动事件)里的 DOMSubtreeModified 可以监听div内容修改 document.querySelector('.elem ...

  6. 1012. The Best Rank (25)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  7. 实现PHPCMS手机门户的伪静态

    1.打开/phpcms/modules/wap/functions/global.func.php找到里面的这两个函数,如下图所示的注释掉的那行代码,在下面加入一行代码. function list_ ...

  8. adb pull apk

    adb shell pm list packages adb shell pm path com.tence01.mm find -name *.apk adb pull /data/app/com. ...

  9. Sql Server中实现Mysql中的group_concat函数效果

    ), GuestName) , , '') as CustomerName FROM orderitem oi 以上涉及的两个表是OrderItem和Guest,以属性OrderSN和ItemId连接 ...

  10. 小小border用处多

    1.实现梯形 利用边框我们可以得到梯形,首先我们给一个div添加边框,当给边框设置四个不同的颜色时,我们可以得到这样的样式,可以看到这里上边框是一个梯形,那么如果我们给其他边框设置颜色为透明(tran ...