用backbone實現的一個MVC的小demo

時間 2019-11-11

標籤 backbone 實現一個 mvc demo 简体版

原文原文鏈接

1、Apache配置

本實例須要使用php支持。要如今Apache中配置虛擬目錄，在Apache下的httpd-vhosts.conf文件中添加以下代碼php

<VirtualHost *:80>
    DocumentRoot "D:/htdocs/backbone_demo"
    ServerName www.backbonedemo.cn
</VirtualHost>

在windows的hosts文件中添加配置，hosts文件的位置在c:\windows\system32\drivers\etchtml

127.0.0.1       www.backbonedemo.cn

2、文件目錄

ajax文件中放置的是php文件，裏面記錄着一些寫死的數據，用於等下作ajax請求返回的假數據。styles放置的是一些簡單的CSS。scripts放置的是腳本文件。optimize是經過node.js壓縮scripts文件後出現的文件夾，裏面存放的也是js腳本。node

scripts文件夾下面放置的是MVC的一些文件，以及一些工具文件等。能夠參考個人另一篇博文http://www.cnblogs.com/strick/p/3776335.html，作過一些簡單說明。jquery

3、demo操做

1.在上面Apache配置好後輸入一個域名，例如個人是www.backbonedemo.cn，顯示畫。選擇不一樣的類型、版塊、分類後到了第二張頁面會顯示不一樣的數據內容，可是這裏爲了作演示，全部就簡單操做，只有兩種數據，一種是選擇類型-》長途，剩下的選擇都是另一種數據了。git

2.點擊打開關鍵字後，顯示一個彈出層畫面，這裏用到了artDialog插件，這個頁面會接收上一張頁面中傳過來的參數，會根據參數選中不一樣的類型、版塊、分類。這個頁面中就用到了backbone的一些語法與操做，具體會在下面介紹。爲了作簡單的演示，添加關鍵字、關鍵字類別、修改關鍵字等，在操做邏輯正常，返回都是提示操做成功，數據也沒有作dom添加操做。github

3.選中某個checkbox後，點擊返回關鍵字，選中的內容會返回到上一頁面中ajax

4、源碼分析

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

1.indexView.js文件主要是在作artDialog的配置，打開彈出層特效。artDialog的介紹能夠參考這裏http://aui.github.io/artDialog/doc/index.htmlwindows

 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         }