一、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\drivers\etc
127.0.0.1 www.backbonedemo.cn
二、文件目录
ajax文件中放置的是php文件，里面记录着一些写死的数据，用于等下做ajax请求返回的假数据。styles放置的是一些简单的CSS。scripts放置的是脚本文件。optimize是通过node.js压缩scripts文件后出现的文件夹，里面存放的也是js脚本。
scripts文件夹下面放置的是MVC的一些文件，以及一些工具文件等。可以参考我的另外一篇博文http://www.cnblogs.com/strick/p/3776335.html，做过一些简单说明。
三、demo操作
1.在上面Apache配置好后输入一个域名，例如我的是www.backbonedemo.cn，显示画。选择不同的类型、版块、分类后到了第二张页面会显示不同的数据内容，但是这里为了做演示，所有就简单操作，只有两种数据，一种是选择类型-》长途，剩下的选择都是另外一种数据了。
2.点击打开关键字后，显示一个弹出层画面，这里用到了artDialog插件，这个页面会接收上一张页面中传过来的参数，会根据参数选中不同的类型、版块、分类。这个页面中就用到了backbone的一些语法与操作，具体会在下面介绍。为了做简单的演示，添加关键字、关键字类别、修改关键字等，在操作逻辑正常，返回都是提示操作成功，数据也没有做dom添加操作。
3.选中某个checkbox后，点击返回关键字，选中的内容会返回到上一页面中
四、源码分析
主要的js文件是views文件夹下面的indexView.js、listView.js和model文件夹下面的listModel.js。
1.indexView.js文件主要是在做artDialog的配置，打开弹出层特效。artDialog的介绍可以参考这里http://aui.github.io/artDialog/doc/index.html
1 define([ 2 ‘jquery‘, 3 ‘dialogPlus‘, 4 ‘constUtil‘ 5 ], function($, dialog, constUtil) { 6 var index = {}; 7 //关键字弹出层显示 8 index.setKeyWordDialogShow = function() { 9 var dialogUrl = constUtil.domain + constUtil.adminKeywordUrl; 10 var title = ‘关键字列表‘; 11 window.dialog = dialog; 12 $(‘#showKeyword‘).click(function() { 13 var link = this; 14 var input = $(link).siblings(‘input[type=text]‘); 15 //var dialog = top.dialog.get(window); 16 var transferData = { 17 ‘pclass‘: $(‘#ddlClass‘).val(), 18 ‘pmodel‘: $(‘#ddlModel‘).val(), 19 ‘ptype‘: $(‘#ddlType‘).val(), 20 ‘txt‘: input.val() 21 }; 22 //console.log(transferData); 23 top.dialog({ 24 url: dialogUrl, 25 title: title, 26 padding: 0, 27 height: 500, 28 width: 900, 29 scrolling: ‘auto‘, //iframe显示滚动条 30 data: transferData, // 给 iframe 的数据 31 onclose: function () { 32 if(!this.returnValue) return; 33 $(‘#ddlClass option[value=‘+ this.returnValue.pclass +‘]‘).attr("selected", true); 34 $(‘#ddlModel option[value=‘+ this.returnValue.pmodel +‘]‘).attr("selected", true); 35 $(‘#ddlType option[value=‘+ this.returnValue.ptype +‘]‘).attr("selected", true); 36 input.val(this.returnValue.txt); 37 } 38 }).showModal(); 39 return false; 40 }); 41 }; 42 return index; 43 });
2.listModel.js主要是做一些数据的验证操作，以及数据的初始化操作
1 define([‘backbone‘, ‘underscore‘, ‘constUtil‘], function(Backbone, _, constUtil) { 2 var list = Backbone.Model.extend({ 3 url: constUtil.domain + constUtil.adminAjaxKeywordUrl, 4 defaults: { 5 data:{ pclass:‘‘, pmodel:‘‘, ptype:‘‘, txt:‘‘} 6 }, 7 initialize: function() { 8 9 }, 10 validate: function(attributes, options) { 11 if(_.isEmpty(attributes.pclass) || attributes.pclass == 0) { 12 return ‘请选择类型！‘; 13 } 14 if(_.isEmpty(attributes.pmodel) || attributes.pmodel == 0) { 15 return ‘请选择版块！‘; 16 } 17 if(_.isEmpty(attributes.ptype) || attributes.ptype == 0) { 18 return ‘请选择分类！‘; 19 } 20 if(!_.isUndefined(attributes.word) && _.isEmpty(attributes.word)) { 21 return ‘请输入关键字！‘; 22 } 23 if(!_.isUndefined(attributes.key) && _.isEmpty(attributes.key)) { 24 return ‘请输入关键字类别！‘; 25 } 26 } 27 }); 28 return list; 29 });
3.listView.js中做的就是整个那个页面的各种逻辑操作：
首先是设置，设置template、el、events
1 template: $(‘#tpl_keyword_list‘).html(), 2 el: ‘#main‘, 3 events: { 4 ‘click .button_submit‘: ‘setKeyWordReturn‘, 5 ‘click .button_search‘: ‘search‘, 6 ‘click #keyword_types a.del‘: ‘delKeywordType‘, 7 ‘click #keyword_types a.edit‘: ‘editKeywordType‘, 8 ‘click #keywords a.del‘: ‘delKeyword‘, 9 ‘click #keywords a.edit‘: ‘editKeyword‘, 10 ‘click .edit_keyword‘: ‘submitEditKeyword‘, 11 ‘click .add_keyword‘: ‘addKeyword‘, 12 ‘click .add_keyword_type‘: ‘addKeywordType‘, 13 ‘click .edit_keyword_type‘: ‘submitEditKeywordType‘, 14 ‘change #ddlClass,#ddlModel,#ddlType‘: ‘render‘ 15 },
然后是设置初始化函数，接收从父级页面传来的参数，绑定作用域，设置选中的下拉框，渲染页面
1 initialize: function() { 2 //获取父级页面传过来的参数 3 this.topDialog = top.dialog ? top.dialog.get(window) : this.model.defaults; 4 this.requestData = this.topDialog.data; 5 this.ddlClass = this.$(‘#ddlClass‘); 6 this.ddlModel = this.$(‘#ddlModel‘); 7 this.ddlType = this.$(‘#ddlType‘); 8 //绑定作用域 9 _.bindAll(this, ‘render‘, ‘renderWithoutDdl‘); 10 this.setSelected(); 11 //渲染页面 12 this.render(); 13 },
接下来是render方法，通过model层请求数据，请求到的数据用Mustache模版填充（Mustache的介绍可以从这里获取到https://github.com/janl/mustache.js/）；获取到的数据动态的修改一个select
1 render: function() { 2 var _this = this; 3 _this.model.fetch({ 4 data: $.param(_this.getSelectValues(‘getKeywords‘)),//参数变量 5 success: function(model, response) {//成功的情况下返回信息 6 var keywords = response;//返回的信息 7 var html = Mustache.to_html(_this.template, keywords);//模板应用 8 _this.$(‘dl‘).remove();//移除原先关键字列表 9 _this.$el.append(html); 10 _this.setKeyWordReference();//选中已选关键字 11 //绑定父级类别下拉列表 12 var types = keywords.DataList; 13 $("#ddlParent option:not(:first)").remove(); 14 $("#ddlKeywordType option:not(:first)").remove(); 15 _.each(types, function(data) { 16 //console.log(data); 17 var option = string.format(‘<option value="{0}">{1}</option>‘, data.KeywordTypeId, data.Name); 18 $(‘#ddlParent‘).append(option); 19 $(‘#ddlKeywordType‘).append(option); 20 }); 21 } 22 }); 23 return _this; 24 },
最后就是一些请求操作，一些比较通用的地方做了一些简单的抽象操作如postKeyword、showDialog方法
1 addKeyword: function(e) { 2 //console.log(e); 3 var typeid = $(‘#ddlKeywordType‘).val(); 4 var otherData = {word: $(e.currentTarget).siblings(‘input[type=text]‘).val(), typeid: typeid}; 5 this.postKeyword({operate: ‘addKeyword‘, validate: true, otherData: otherData}); 6 }, 7 postKeyword: function(options) {//post提交给服务器 8 var _this = this; 9 var data = this.getSelectValues(options.operate); 10 if(!_.isEmpty(options.otherData)) { 11 _.extend(data, options.otherData); 12 } 13 if(options.validate) { 14 var msg = this.model.validate(data); 15 if(_.isString(msg)) { //错误提示 16 this.showDialog({content: msg}); 17 return; 18 } 19 } 20 $.post(_this.model.url, data, function(response) { 22 _this.showDialog({content: response.Msg}); 23 _this.renderWithoutDdl(); 24 }, ‘json‘); 25 }, 26 showDialog: function(options) {//提示框 27 var defaults = { 28 quickClose: true // 点击空白处快速关闭 29 }; 30 _.extend(defaults, options); 31 defaults.title = options.title || ‘信息提示‘; 32 defaults.width = options.width || 140; 33 dialog(defaults).show(); 34 }
水平有限还有很多地方需要改进，这里就只做个简单展示操作啦
源码可以在这里下载
也可以通过这里下载到http://download.csdn.net/download/loneleaf1/7500989