实例学习Backbone.js(一)

前面有两篇文章介绍了Backbone的model、collection和view,那么接下来我想用一个完整的Demo来记录我学习的过程,

单页操作,实现数据的增删改,后台使用json做数据库,通过restful模式接口实现增删改操作

backbone的ajax发送的常用请求包括create、put、read、delete对应http的post、update、get、delete

接下来开始吧

服务端的实现就不介绍了,restful路由的定义如下

module.exports = {
    get:{
        "/": index.homepage,  //主页
        "/api/models/:size/:index": index.getModels   //获取数据集,分页
    },
    post:{
        "/api/model": index.insertModel   //保存model
    },
    put:{
        "/api/model/:id": index.updateModel  //修改model
    },
    delete:{
        "/api/model/:id": index.delModel   //删除model
    },
    patch: {
        "/api/model/:id": index.updateModel  //修改model,在save的时候设置patch:true,则执行该路由
    }
};

首先把页面html贴出来



长度:<input id="len" type="text" /> 数量:<input id="count" type="text" /> 批次:<input id="batch" type="text" /> 备注:<input id="remark" type="text" /> <input id="btnSave" type="button" value="save" /> <br /><br /></pre>
<table class="listContent" style="border-bottom: 0px;" border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td class="cbox-td" style="background-color: gainsboro;">选择</td>
<td class="len-td" style="background-color: gainsboro;">总长度(mm)</td>
<td class="useLen-td" style="background-color: gainsboro;">使用长度(mm)</td>
<td class="lastLen-td" style="background-color: gainsboro;">剩余长度(mm)</td>
<td class="flag-td" style="background-color: gainsboro;">是否有效</td>
<td class="batch-td" style="background-color: gainsboro;">批次</td>
<td class="remark-td" style="background-color: gainsboro;">备注</td>
<td class="operate-edit" style="background-color: gainsboro;">修改</td>
<td class="operate-del" style="background-color: gainsboro;">删除</td>

    </tr>

</tbody>
</table>
<table id="listContent" class="listContent" style="margin-top: -1px;" border="0" cellspacing="1" cellpadding="1"></table>
<pre>
<a id="preBtn" href="http://www.cnblogs.com/javascript:;">上一页</a>
&nbsp;&nbsp;&nbsp;
<span id="pageIndex"></span>
&nbsp;&nbsp;&nbsp;
<a id="nextBtn" href="http://www.cnblogs.com/javascript:;">下一页</a>
<script id="listContentTemplate" type="text/html">
    <tr>
        <td class="cbox-td">
            <input type="checkbox" class="check-len" lang="{id}"/>
        </td>
        <td class="len-td">
            <label class="len-label">{len}</label>
            <input type="text" class="update-text" />
        </td>
        <td class="useLen-td">
            {useLen}
        </td>
        <td class="lastLen-td">
            {lastLen}
        </td>
        <td class="flag-td">
            {flag}
        </td>
        <td class="batch-td">
            {batch}
        </td>
        <td class="remark-td">
            {remark}
        </td>
        <td class="operate-edit">
            <a href="javascript:;" class="li-update">修改</a>
            <a href="javascript:;" class="li-confirm" lang="{id}" style="display: none;">确定</a>
            &nbsp;
            <a href="javascript:;" class="li-cancel" style="display: none;">取消</a>
        </td>
        <td class="operate-del">
            <a href="javascript:;" class="li-del" lang="{id}">删除</a>
        </td>
    </td>
</script>

上面的html代码就不用分析了

有实现功能可看出Model包含长度、批次、备注、使用长度、剩余长度、是否可用等属性

首先我们做的就是定义Model对象,代码如下

var Model = Backbone.Model.extend({
        urlRoot: "/api/model",
        initialize: function () {
            this.bind("change", function () {
            });
            this.bind("invalid", function (model, error) {
                if (error) {
                    alert(error);
                }
            });
        },
        defaults: {
            id: null,
            len: 0,
            useLen: 0,
            lastLen: 0,
            flag: true,
            batch:0,
            remark: "",
            createTime: Date.now()
        },
        validate: function (attributes) {
            if (attributes.len <= 0 || attributes.len == "") {
                return "长度输入不合理";
            }
        }
    });

代码分析:

首先看看urlRoot,model包括url和urlRoot两个用来与服务器进行通讯的路由地址,在model没有和Collection一块使用的时候则用url,若model和collection一块使用则使用urlRoot。

在initialize构造方法中绑定了两个方法,change:属性被改变时触发,invalid:验证属性时触发。

defaults:定义mode的属性

validate:验证字段的合法性

好咯model定义完成,但是我们要去数据集合,所有就要配合collection使用,下面定义一个Collection对象

    var Models = Backbone.Collection.extend({
        model: Model,
        initialize: function () {}
    });

代码分析:

很简单的一个Collection集合,用来保存model,通过model来指定使用的Model对象

initialize:同样是构造方法

这样Model就和Collection关联起来了,那么数据选择就要再view(视图)中完成了,

view的作用就是要完成所有页面执行事件,取数据集合、保存事件、修改事件、删除事件、分页事件等

那么接下来定义view

var ModelView = Backbone.View.extend({
	el: $("body"),  //控制模块
	size: 30,       //分页
	index: 0,       //页码
	sumCount: 0,    //
	allowNext: true,  //是否允许下一页执行
	initialize: function () {
	  this.models = new Models();
	  this.uiList = $("#listContent");
	  this.render();
	},
	render: function () {
	  //初始化加载
	},
	events: {//绑定事件
	  "click #btnSave": "save",
	  "click .li-del": "del",
	  "click .li-update": "update",
	  "click .li-confirm": "confirmUpdate",
	  "click .li-cancel": "cancel",
	  "click #preBtn": "prePage",
	  "click #nextBtn": "nextPage"
	},
	save: function () {
	  //保存事件,保存的时候是没有id的,所有会执行Model中的urlRoot路由
	},
	del: function (event) {
       //删除事件
	},
	update: function(event){
	  //修改,弹出确认框,真正修改在confirmUpdate方法中
	},
	confirmUpdate: function(event){
       //真正修改,方法请求
	},
	initListContent: function (collection) {
	  //装载数据到页面
	},
	prePage: function(event){
	  //上一页
	},
	nextPage: function(event){
	  //下一页
	},
	setPageIndexToSpan: function(){
	  //显示当前页码
	}
);

上面是View的定义,包括需要的事件定义,

后面会一一实现view中的这些事件 下篇再接着写.........................

时间: 2024-10-18 00:51:22

实例学习Backbone.js(一)的相关文章

使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去,这似乎不是一件非常好的事情,因为将js代码和html代码融合到一起会增加代码的维护难度,而且这个过程中考虑到性能的因素,需要将HTML代码放到一个数组中,最后进行拼接,代码写起来比较麻烦.我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染. 我

Backbone.js

http://backbonejs.org/#introduction Backbone.js gives structure to web applications      by providing models with key-value binding and custom events,      collections with a rich API of enumerable functions,      views with declarative event handlin

Backbone.js之model篇(一)

Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web 前端交互应用. Backbone 主要包括 models, collections, views 和 events, controller. (一)model 关于 backbone,最基础的一个东西就是 model,这个东西就像是后端开发中的数据库映射那个 model 一样,也是数据对象的模型,

Backbone.js入门学习笔记目录

//来自 https://www.the5fire.com/backbone-tutorials-catalogue.html 1.初识backbone.js 2.通过helloworld来认识下backbone 3.backbone中的model实例 4.backbone的collection实例 5.backbone中的Router实例 6.backbone中的view实例 7.backbone实例todos分析(一) 8.backbone实例todos分析(二)view的应用 9.back

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.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Backbone.js 的最佳应用场景有哪些?

新版的有道笔记 Web 版(http://note.youdao.com)也使用了 Backbone.就像其他答案回答的,Backbone 最适合的应用场景是单页面应用,并且页面上有大量数据模型,模型之间需要进行复杂的信息沟通.Backbone 在这种场景下,能很好的实现模块间松耦合和事件驱动. 其他适用产品还有微博,网易微博的前端设计也是和 Backbone 类似的一个结构. Backbone 的优点和一些经验 Tip: View 的划分将页面上的视图元素解耦,粒度细化.View 间通过事件和

requirejs、backbone.js配置

requirejs初探参考资料官网:http://requirejs.org中文译文:http://makingmobile.org/docs/tools/requirejs-api-zhreuqirejs.backbone的配置例子 (function(){ require.config({ baseUrl: "../js", paths: { jquery: "libs/jquery.min", underscore: "libs/underscore