用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\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         }

水平有限还有很多地方需要改进，这里就只做个简单展示操作啦

源码可以在这里下载

backbone_demo.rar

也可以通过这里下载到http://download.csdn.net/download/loneleaf1/7500989