用backbone实现的一个MVC的小demo

简介: 本实例需要使用php支持。要现在Apache中配置虚拟目录,在Apache下的httpd-vhosts.conf文件中添加如下代码

一、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


二、文件目录


image.png


ajax文件中放置的是php文件,里面记录着一些写死的数据,用于等下做ajax请求返回的假数据。styles放置的是一些简单的CSS。scripts放置的是脚本文件。optimize是通过node.js压缩scripts文件后出现的文件夹,里面存放的也是js脚本。


19.png



scripts文件夹下面放置的是MVC的一些文件,以及一些工具文件等。可以参考我的另外一篇博文http://www.cnblogs.com/strick/p/3776335.html,做过一些简单说明。


三、demo操作


1.在上面Apache配置好后输入一个域名,例如我的是www.backbonedemo.cn,显示画。选择不同的类型、版块、分类后到了第二张页面会显示不同的数据内容,但是这里为了做演示,所有就简单操作,只有两种数据,一种是选择类型-》长途,剩下的选择都是另外一种数据了。


20.png


2.点击打开关键字后,显示一个弹出层画面,这里用到了artDialog插件,这个页面会接收上一张页面中传过来的参数,会根据参数选中不同的类型、版块、分类。这个页面中就用到了backbone的一些语法与操作,具体会在下面介绍。为了做简单的演示,添加关键字、关键字类别、修改关键字等,在操作逻辑正常,返回都是提示操作成功,数据也没有做dom添加操作。


21.png


3.选中某个checkbox后,点击返回关键字,选中的内容会返回到上一页面中


22.png

四、源码分析


主要的js文件是views文件夹下面的indexView.js、listView.js和model文件夹下面的listModel.js。

1.indexView.js文件主要是在做artDialog的配置,打开弹出层特效。artDialog的介绍可以参考这里http://aui.github.io/artDialog/doc/index.html


define([
    'jquery',
    'dialogPlus',
    'constUtil'
], function($, dialog, constUtil) {
    var index = {};
    //关键字弹出层显示
    index.setKeyWordDialogShow = function() {
        var dialogUrl = constUtil.domain + constUtil.adminKeywordUrl;
        var title = '关键字列表';
        window.dialog = dialog;
        $('#showKeyword').click(function() {
            var link = this;
            var input = $(link).siblings('input[type=text]');
            //var dialog = top.dialog.get(window);
            var transferData = {
                'pclass': $('#ddlClass').val(),
                'pmodel': $('#ddlModel').val(),
                'ptype': $('#ddlType').val(),
                'txt': input.val()
            };
            //console.log(transferData);
            top.dialog({
                url: dialogUrl,
                title: title,
                padding: 0,
                height: 500,
                width: 900,
                scrolling: 'auto', //iframe显示滚动条
                data: transferData, // 给 iframe 的数据
                onclose: function () {
                    if(!this.returnValue) return;
                    $('#ddlClass option[value='+ this.returnValue.pclass +']').attr("selected", true);
                    $('#ddlModel option[value='+ this.returnValue.pmodel +']').attr("selected", true);
                    $('#ddlType option[value='+ this.returnValue.ptype +']').attr("selected", true);
                    input.val(this.returnValue.txt);
                }
            }).showModal();
            return false;
        });
    };
    return index;
});


2.listModel.js主要是做一些数据的验证操作,以及数据的初始化操作


define(['backbone', 'underscore', 'constUtil'], function(Backbone, _, constUtil) {
    var list = Backbone.Model.extend({
        url: constUtil.domain + constUtil.adminAjaxKeywordUrl,
        defaults: {
            data:{ pclass:'', pmodel:'', ptype:'', txt:''}
        },
        initialize: function() {
        },
        validate: function(attributes, options) {
            if(_.isEmpty(attributes.pclass) || attributes.pclass == 0) {
                return '请选择类型!';
            }
            if(_.isEmpty(attributes.pmodel) || attributes.pmodel == 0) {
                return '请选择版块!';
            }
            if(_.isEmpty(attributes.ptype) || attributes.ptype == 0) {
                return '请选择分类!';
            }
            if(!_.isUndefined(attributes.word) && _.isEmpty(attributes.word)) {
                return '请输入关键字!';
            }
            if(!_.isUndefined(attributes.key) && _.isEmpty(attributes.key)) {
                return '请输入关键字类别!';
            }
        }
    });
    return list;
});

3.listView.js中做的就是整个那个页面的各种逻辑操作:

首先是设置,设置template、el、events


template: $('#tpl_keyword_list').html(),
        el: '#main',
        events: {
            'click .button_submit': 'setKeyWordReturn',
            'click .button_search': 'search',
            'click #keyword_types a.del': 'delKeywordType',
            'click #keyword_types a.edit': 'editKeywordType',
            'click #keywords a.del': 'delKeyword',
            'click #keywords a.edit': 'editKeyword',
            'click .edit_keyword': 'submitEditKeyword',
            'click .add_keyword': 'addKeyword',
            'click .add_keyword_type': 'addKeywordType',
            'click .edit_keyword_type': 'submitEditKeywordType',
            'change #ddlClass,#ddlModel,#ddlType': 'render'
        },


然后是设置初始化函数,接收从父级页面传来的参数,绑定作用域,设置选中的下拉框,渲染页面


initialize: function() {
            //获取父级页面传过来的参数
            this.topDialog = top.dialog ? top.dialog.get(window) : this.model.defaults;
            this.requestData = this.topDialog.data;
            this.ddlClass = this.$('#ddlClass');
            this.ddlModel = this.$('#ddlModel');
            this.ddlType = this.$('#ddlType');
            //绑定作用域
            _.bindAll(this, 'render', 'renderWithoutDdl');
            this.setSelected();
            //渲染页面
            this.render();
        },


接下来是render方法,通过model层请求数据,请求到的数据用Mustache模版填充(Mustache的介绍可以从这里获取到https://github.com/janl/mustache.js/);获取到的数据动态的修改一个select


render: function() {
            var _this = this;
            _this.model.fetch({
                data: $.param(_this.getSelectValues('getKeywords')),//参数变量
                success: function(model, response) {//成功的情况下返回信息
                    var keywords = response;//返回的信息
                    var html = Mustache.to_html(_this.template, keywords);//模板应用
                    _this.$('dl').remove();//移除原先关键字列表
                    _this.$el.append(html);
                    _this.setKeyWordReference();//选中已选关键字
                    //绑定父级类别下拉列表
                    var types = keywords.DataList;
                    $("#ddlParent option:not(:first)").remove();
                    $("#ddlKeywordType option:not(:first)").remove();
                    _.each(types, function(data) {
                        //console.log(data);
                        var option = string.format('<option value="{0}">{1}</option>', data.KeywordTypeId, data.Name);
                        $('#ddlParent').append(option);
                        $('#ddlKeywordType').append(option);
                    });
                }
            });
            return _this;
        },

最后就是一些请求操作,一些比较通用的地方做了一些简单的抽象操作如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         }


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

相关文章
|
存储 前端开发 API
30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
|
6月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
50 2
|
Web App开发 前端开发 JavaScript
|
前端开发
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局
上一话我们详细介绍了多MVC模式以及Segue过渡的时候,这一话用一个新的Demo来诠释。 我们新建一个Psychologist的工程。
824 0
|
前端开发 iOS开发 Swift
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记23 多MVC模式Demo的实现
上一话我们对Demo的选择界面做了自动布局的相关处理,现在开始连接多个MVC的操作。首先我们需要其他工程中的文件,那么让我们打开另一个app。
1048 0
|
前端开发 应用服务中间件 Java
bbossgroups mvc demo构建部署方法
bbossgroups mvc demo部署方法: 1.环境准备 jdk 1.6或以上 tomcat 7或以上版本 2.下载最新的源码包 bboss-site(定期发布) 3.下载后解压,进入bboss-site工程目录,执行build.
713 0
|
3月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
46 0