backbone showcase - 相关文章

Backbone源码解析（六）：观察者模式应用

卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和实现技巧.忽略了它的设计思想,而卤煮认为,一套库或者框架最值得借鉴的地方正好是它的设计思想.也巧,最近卤煮在读<设计模式与实践>这本书,所以温故知新,学以致用,打算写一篇博客算作这个系列的补充,以免将来忘记了代码时可以作为参考. 观察者模式即使不用读源码,也知道backbone使用了观察者模式.…

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈更详细的说明: 模型(Mod…

使用backbone的history管理SPA应用的url

本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是其中的两个难点.就url的管理而言,主要有以下三方面的要求: 1)对于要采用单页跳转的链接,不能有页面刷新: 2)浏览器的前进和后退,都能像多页应用那样,显示之前访问地址对应的内容: 3)应用处于任何一个单页链接地址时,当用户刷新,依然能初始化显示该地址对应的内容. 假如要自己来实现一个能够满足以上…

Backbone中的model和collection在做save或者create操作时，如何选择用POST还是PUT方法？

Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行create时,自动将数据用POST或者PUT方式通过该url发送到后端.按照POST和PUT的含义,backbone采用的原则是: 如果model数据为一个全新的实例,则使用POST请求:如果model数据是一个已经存在的实例, 单需要修改实例属性,则采用PUT请求. 所以,问题的关键是,backbon…

Backbone.js 中的Model被Destroy后，不能触发success的一个原因

下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到destroy的success()方法.但数据库已经成功删除,也未报任何异常,但前端JS的success始终不能触发. User = Backbone.Model.extend({ initialize: function(user) { ... ... }, url:"/user/xxx", }…

Backbone.js应用基础

前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交互主要是通过Restful JSON 进行数据传输: 基础Backbone.js知识: 1.引入js文件:如果依赖于第三方类库如jquery,则最好先引入:之后引入underscore.js 这是必须引入且在引入backbone.js之前,其引入文档结构如下: <head> <meta ch…

Backbone事件模块及其用法

事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说,它是Backbone的核心组成部分. 此外,事件模块的所有方法都挂在了全局的Backbone上,如果你的代码中需要用到自定义事件(实现观察者模式),可以直接使用它. 一.Events API 1.0之前只提供了三个基本方法 on/once/off/trigger,1.0开始增加了几个实用方法 li…

Backbone源码学习之extend

extend函数在backbone大概就20来行代码包括注释,对学习Javascript中"类"的继承很是好的学习资料. 下面先贴出Backbone中的源码,其中涉及到underscore库中几个实用函数_.has();.create();.extend(); // Helper function to correctly set up the prototype chain for subclasses. // Similar to `goog.inherits`, but uses…

Backbone,Marionette,Talent学习笔记

具体以源码为准 Talent继承自Marionette继承自BackBone Region: 继承自Backbone.Event,show(view)会调用view.render(),然后$el.append(view.el),触发相应的事件 Layout: 继承自 ItemView,可以设置regions属性 CompositeView: 继承自collectionView,将Item添加到template中 'itemview:deleteItem'事件 itemViewOptions Co…

backbone入门示例

最近因为有个项目需要用backbone+mui 所以最近入坑backbone. Backbonejs有几个重要的概念,先介绍一下:Model,Collection,View,Router.其中Model是根据现实数据建立的抽象,比如人(People):Collection是Model的一个集合,比如一群人:View是对Model和Collection中数据的展示,把数据渲染(Render)到页面上:Router是对路由的处理,就像传统网站通过url现实不同的页面,在单页面应用(SPA)中通过R…

backbone新手填坑教程资源

backbone 入门第二版 http://www.kancloud.cn/kancloud/backbonejs-learning-note/49379 backbone 入门讲解 http://www.cnblogs.com/chaojidan/p/4207227.html#undefined backbone 入门范例 http://dmyz.org/archives/598…

Backbone源码分析（三）

Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨Collection的源码. 让我们先来看一下Collection的构造函数: // Create a new **Collection**, perhaps to contain a specific type of `model`. // If a `comparator` is specifie…

Backbone源码分析（二）

在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码中几个重要的函数. 我们先看一下Model的构造函数做了哪些事情: // Create a new model with the specified attributes. A client id (`cid`) // is automatically generated and assigned…

Backbone源码分析（一）

距离上一篇博客有一段时间了,期间各种琐事萦绕.最主要的一件是,当我差不多将整个dojo核心源码看完,惊讶的发现dojo1.*的设计以是老态龙钟之象,而我沉溺在dojo中太久,已经不知道前端世界变成了什么样.这无异于晴天霹雳,霹的我目瞪口呆.汗流满面,惶惶不可终日.索性亡羊补牢为时未晚,这段期间虽有各种烦心事,但还能于百烦之中腾出点时间,看看源码已经是万中之幸.各种前端类库如浩瀚星辰,面对它们才能感觉到自身技术的浅薄,自身能力的低微.初出茅庐天下无敌,再练三年寸步难行,这就是我当前最真切的体悟.现…

RequireJS与Backbone简单整合

前言昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学习了RequireJS,没做demo,这个周末又在看电影打游戏睡觉瞎折腾,转眼就周日下午了,突然诗性大起,于是作诗一首先: 古有通宵看A片,今有彻夜码代码好吧,我们开始今天的学习吧,我们今天先用backbone做一个通讯录的东西,然后使用requireJS组装之. 部分参考:the5fire的技术…

利用typescript使backbone强类型智能提示

模型类一旦多了没有强类型和智能提示是相当痛苦的,所以. 仅仅用ts定义一个模型类: class Person extends Backbone.Model { defaults = { Name:"" }; //类似java的 Set Get 方法 GetName(){this.get("Name")} SetName(obj){this.set("Name",obj)} }; 使用的时候: 比如render方法中 var Model:Psers…

前端MVC框架Backbone 1.1.0源码分析系列

Backbone.js 是一个在JavaScript环境下的模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的Web应用程序代码中,不可避免的都有在应用逻辑中加入显示数据的代码的情况.当项目规模愈发变大时,这种形式的代码变得越发的难以维护,因为任何在主干逻辑中的变更都可能影响到数据显示逻辑,反之亦然. Backbone就是要来解决这样的代码耦合的问题.它通过提供一个控制层-显示层的框架,以及模版(templ…

前端MVC框架Backbone 1.1.0源码分析(一)

前言如何定义库与框架前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能实现同样的DOM操作,换句话说,不管你用来还是不用,都不影响你整体的布局,或者是代码体系结构. 框架则是一套完整的解决方案,针对是某一个领域的,比如EXT,dojo,那么很明显,你要用就需要按照它的规则执行,不管是编码风格还是结构,有一定的约束力一个老话题,前端为什么要用MVC 前端开发中呢,不可…

前端MVC框架Backbone 1.1.0源码分析(二) - 模型

模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your dom…

用backbone实现的一个MVC的小demo

一.Apache配置本实例需要使用php支持.要现在Apache中配置虚拟目录,在Apache下的httpd-vhosts.conf文件中添加如下代码 <VirtualHost *:80> DocumentRoot "D:/htdocs/backbone_demo" ServerName www.backbonedemo.cn </VirtualHost> 在windows的hosts文件中添加配置,hosts文件的位置在c:\windows\system32…

我对Backbone.js的一些认识

backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术虽好,但是对个人的挑战也是比较大:首先是在编程基础这个部分,包括数据结构,算法,面向对象编程,设计模式,设计原则等等,我觉得在这些方面积累地还不够:其次是工作方法层面,对比angualr,react以及vue,跟传统的用原生js或者jquery写的代码,包括html,css和js三个方面,你会发现这…

浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首…

backbone学习总结（二）

今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理通过 Backbone.Router.extend 来创建路由模型,链接到不同的指定的动作和事件.当应用已经全部链接到路由时,需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由. 我们来…

Backbone 学习笔记

Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户端和服务器间的数据传输,从而实现了更快加速的Web页面更新. 能心静下来学习了,以前以为Backbone 是一座高山用起来很难,结果只是学了2天就有一些新的,实在让人开心. 我整理了一下整个BackBone的学习记录在我的GIT里面,大部分事件都有例子并且有详细的注解和解释,结合require.js…

Backbone源码阅读手记

Backbone.js是前端的MVC框架,它通过提供模型Models.集合Collection.视图Veiew赋予了Web应用程序分层结构.从源码中可以知道,Backbone主要分了以下几个模块: (function(root) { Backbone.Events //自定义事件机制 Backbone.Model //模型 Backbone.Collection //模型集合 Backbone.Router //路由配置器 Backbone.View //视图 Backbone.sync //向…

实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间三.前端制作这里没有用到Backbone的Router,因为这里不需要记录hash记录 1.Div+CSS制作静态页面,这里item-template为每一个发言的模版 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <…

TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview, collectionview, compositeview 和layoutview. js/templates.js /*global define */ define(function (require) {//这里用了简写,因为require.js是CommonJS 模块,相当于 defin…

TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二数据处理

当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数据的交互封装好,然后我们使用时可以给数据的变化绑定事件,可以相应的去更新到Dom(这里是View) V-View(Marionette扩展了,有ItemView,CollectionView,CompositeView和LayoutView),则聚焦于处理Dom节点 C-Controller: R…

TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一

Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构建或者扩展了很多新的东西,如:Application,Region,ItemView,CollectionView,CompositeView,LayoutView,AppRoute,Controller等等,把很多重复性的工作变成配置,程序入口引入了集中处理器Application,貌似Mario…

【backbone showcase】的更多相关文章