认识Backbone (四)

Backbone.View(视图) 视图的核心是处理数据业务逻辑.绑定DOM元素事件.渲染模型或者集合数据. 添加DOM元素 render view.render() render 默认实现是没有操作的. 重载本函数可以实现从模型数据渲染视图模板,并可用新的 HTML 更新 this.el. 推荐的做法是在 render 函数的末尾 return this 以开启链式调用. var testview = Backbone.View.extend({ id: 'show', render: fu…

JavaScript--模块化编程(笔记)

一直对JS都是一知半解,最近遇到这方面问题,所以在网上学习了一下,现在还没有完全明白,先贴出笔记; 第一章 JavaScript模块化编程(一):模块的写法一原始写法 // 模块就是实现特定功能的一组方法;只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块; function m1(){ // ... } function m2(){ // ... } // 上面的函数m1()和m2(),组成一个模块;使用时直接调用就行; // 缺点:"污染"了全局变量; 无法保…

用Backbone.js创建一个联系人管理系统(四)

原文: Build a Contacts Manager Using Backbone.js: Part 4 这一系列教程的第四部分,教我们如何完成对已经存在的Contacts进行编辑和保存. 本教程是基于这一系列的前三个教程. 有不清楚的请先阅读前三部分. 开始在Contact原模版里添加一个edit按钮. <button class="edit">Edit</button> 在原Contact显示模版下添加新的编辑模版 <script id=&quo…

Backbone源码解析（四）：View（视图）模块

View视图故名思义,它控制的是界面.我们可以把一个大的网页分成很多部分的视图,按照backbone的架构,每一个视图对应都是一个对象,我们可以通过元素的钩子(id或者class或者其他选择器)把它们封装到View对象中集中操作.由于传统项目中界面视图和数据不分层,使得各种操作数据逻辑和视图逻辑的代码混杂在一起,提高了代码的耦合度.backbone就是将这种情况作了很好的处理.下面我们通过一个简单的例子一步步地讲明白它的具体设计思路: 首先我们编写基础的html: <div id="m&q…

（四）backbone - DEMO - 通信录

DEMO介绍是DEMO - User List 的扩展,增加查询大体实现 •创建Contact Model var Contact = Backbone.Model.extend({ defaults: { name: '小强', email: 'walker@dead.com' }, // validate user name validate: function(attrs,options) { if (attrs.name == "") { return "what…

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

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

backbone入门示例

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

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

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

用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作前端,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"> <…

Tastypie与Backbone交互

上回玩到Tastypie与jQuery交互,那么现在接着玩玩Tastypie与Backbone.js交互先把上篇的template文件:D:\project\tastypie\mysite\blog\templates\blog\index.html改改,添加了backbone的相关依赖文件,代码如下[增.删.改.查]: 一.GET id为1的blog文章出来: <!DOCTYPE html> <html lang="en" xmlns="http://w…

用Backbone.js教程系列的链接

整理了一下用Backbone.js系列教程链接. Backbone.js入门教程用Backbone.js创建一个联系人管理系统(一) 用Backbone.js创建一个联系人管理系统(二) 用Backbone.js创建一个联系人管理系统(三) 用Backbone.js创建一个联系人管理系统(四) 用Backbone.js创建一个联系人管理系统(五)…

用Backbone.js创建一个联系人管理系统(五)

原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact的数据存储到数据库里. 开始准备在这里我们需要一个Web服务器,还有一个数据库. 可以是SQLServer.我们需要在数据库中创建一个表来存储Concat. 表还要有一个主键ID,最好这个ID是unique和自增长类型的. 虽然现在我们的Concat model里没有这个属性但是要把它存储到数…

【再探backbone 01】模型-Model

前言点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由的#改为其他我其实想说这个不能乱改,又怕不熟悉误人子弟,所以今天我们来一起重新学习下他,看看会不会带来不一样的感觉我在博客园nuysoft的博客看到了backbone的分析,可惜没有写完,不失为一个遗憾,希望作者坚持下去,水平高得贡献出来哟(@nuysoft) 然后,网上backbone基础用法…

backbone模型层浅析

Model层有两个类: Model, Collection 1.Model 不翻文档,我们用代码说话. 首先分析下类. var myM = Backbone.Model.extend({})//构造一个Model类,myM 这个类居然是空的,没有官方所说的那么多属性啊,难道underscore失灵了? >_.keys(myM) ["extend", "__super__"] >_.keys(Backbone.Model) ["extend&qu…

require.js+backbone.js基本使用

一.菜单{ //银行卡基础信息维护 rsId: 'menu.param.cardbin', iconCls: 'icon-double-angle-right', name: menusLang._('menu.param.cardbin'), url: '#', deps: ['app/param/card-bin/card-bin-app'],// app/param/card-bin/list/list-view trigger: 'card-bins:list'} 二.第二步define…

Backbone.js入门教程

原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我要高兴的像你介绍backbont.js. 一个能够非常容易创建复杂的,交互式数据驱动应用但却非常小巧的框架.她提供了简单清楚的方法把数据从表现层中分离出来. Overview和FAQ我就不多翻译了. 开始了解Backbone.js Backbone.js由四个大类构成 Model Collect…

【JavaScript】对比12 款优秀的JavaScript MVC/MVVC框架你最喜欢Backbone or Ember

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ 目前基本所以后台程序都是面向对象MVC模式开发,作为Web前端开发的人来说,也是很需要的,那么目前有没有可以借鉴的呢?作者(Gordon L.Hempton)一直在寻求哪种MVC框架最为完美,他将目前能获取到的所有框架都粗略地试了试,然后在文章中列出了每一种框架的情况概要,在文末分享了作者经过对比之后最终的推荐产品. 首先要特别说明一下,作者认为…