node的实践（项目三）
Posted 飘然离去
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了node的实践（项目三）相关的知识，希望对你有一定的参考价值。
渲染前台的方式。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="/stylesheets/common/cp.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/factory/list.css"> <title>乐视广告创意平台|我的创意</title> </head> <body class="body-bg"> <% include header %> <script id="createPopupTmpl" type="x-tmpl-mustache"> <div id="createPopup" class="popup-create"> <div class="popup-create-head"> <span class="popup-create-title">新建创意</span> <span id="popupCreateClose" class="popup-create-close"></span> </div> <div> <span class="popup-create-label">平台：</span> <select id="popupAppType" class="popup-create-select"></select> </div> <div> <span class="popup-create-label">广告位：</span> <select id="popupCategory" class="popup-create-select"></select> </div> <div> <span class="popup-create-label">模板：</span> <select id="popupTemplate" class="popup-create-select"></select> </div> <div class="popup-create-title-box"> <span class="popup-create-label">标题：</span> <input id="popupTitleInput" type="text" class="input popup-create-title-input" value="{{title}}"></input> </div> <p id="popupCreateTip" class="popup-create-tip"> </p> <div class="popup-create-button-box"> <input id="popupCreateSubmit" class="button popup-button popup-create-button-submit" type="button" value="确定"/> <input id="popupCreateCancel" class="button popup-button" type="button" value="取消"/> </div> </div> </script> <script id="popupAppTypeTmpl" type="x-tmpl-mustache"> {{#appTypes}} <option value="{{id}}">{{title}}</option> {{/appTypes}} </script> <script id="popupCategoryTmpl" type="x-tmpl-mustache"> {{#categories}} <option value="{{categoryId}}">{{title}}</option> {{/categories}} </script> <script id="popupTemplateTmpl" type="x-tmpl-mustache"> {{#templates}} <option value="{{tId}}">{{title}}</option> {{/templates}} </script> <div id="toolbar"> <div id="toolbar-box"> <div id="platform"></div> <span>平台</span> <select id="appTypeSelect" class="platform-select"> <script id="appTypeTmpl" type="x-tmpl-mustache"> {{#appTypes}} <option value="{{id}}">{{title}}</option> {{/appTypes}} </script> </select> <div class="category-template-nav"> <span>广告创意：</span> <span id="categoryNav" class="category-template-nav-label"></span> <span id="categoryNavSep" class="category-template-nav-label">>></span> <span id="templateNav" class="category-template-nav-label"></span> </div> <div id="createCreativeBtn" class="creative-add"></div> </div> </div> <div id="container"> <div class="sidebar"> <ul id="sidebarCategory" class="sidebar-category"> </ul> </div> <script id="catetoryTmpl" type="x-tmpl-mustache"> {{#categories}} <li> <span id="categoryId-{{categoryId}}-icon" class="sidebar-category-icon"></span> <span id="categoryId-{{categoryId}}-title" class="sidebar-category-label">{{title}}</span> <ul id="categoryId-{{categoryId}}-templates" > </ul> </li> {{/categories}} </script> <script id="templateTmpl" type="x-tmpl-mustache"> <li id="templateId-{{tId}}-title" class="sidebar-template-label">{{title}}</li> </script> <div class="right-box"> <div id="creativeBox" class="creative-box"> </div> <div id="paging" class="paging"></div> </div> <script id="noCreativeTmpl" type="x-tmpl-mustache"> <div class="nocreative-box"> <div></div> <img src="/images/factory/nocreative.jpg" /> </div> </script> <script id="pagingTmpl" type="x-tmpl-mustache"> <a id="page-{{page}}" class="paging-btn">{{label}}</a> </script> <script id="creativeTmpl" type="x-tmpl-mustache"> <div id="creativeId-{{creativeId}}-creative-item" class="creative-item"> <div id="creativeId-{{creativeId}}-rename-popup" class="creative-rename-popup"> <div class="creative-rename-panel"> <div class="creative-rename-panel-head"> <span class="creative-rename-popup-label">重命名</span> <span id="creativeId-{{creativeId}}-rename-close" class="creative-rename-popup-close"></span> </div> <p> <input class="creative-rename-popup-input" type="text"/> </p> <p class="creative-rename-popup-tip">标题不能为空</p> <div class="creative-rename-popup-button-box"> <input id="creativeId-{{creativeId}}-rename-submit" class="button popup-button creative-rename-submit" type="button" value="确定"/> <input id="creativeId-{{creativeId}}-rename-cancel" class="button popup-button creative-rename-cancel" type="button" value="取消"/> </div> </div> </div> <div id="creativeId-{{creativeId}}-delete-popup" class="creative-delete-popup"> <div class="creative-delete-panel"> <div class="creative-delete-panel-head"> <div id="creativeId-{{creativeId}}-delete-close" class="creative-delete-popup-close"></div> </div> <p class="creative-delete-panel-title">是否要删除当前创意？</p> <p class="creative-delete-popup-tip">删除失败</p> <div class="creative-delete-popup-button-box"> <input id="creativeId-{{creativeId}}-delete-submit" class="button popup-button creative-delete-submit" type="button" value="确定"/> <input id="creativeId-{{creativeId}}-delete-cancel" class="button popup-button creative-delete-cancel" type="button" value="取消"/> </div> </div> </div> <a id="creativeId-{{creativeId}}-img" class="creative-item-img-box" href="/creative/edit/{{creativeId}}" target="_blank"> <img class="creative-item-img" src="/images/factory/q.png" /> </a> <a id="creativeId-{{creativeId}}-creative-item-title" href="/creative/edit/{{creativeId}}" target="_blank" class="creative-item-title">{{title}}</a> <div class="creative-item-info"> <span>{{category.title}}</span> <span>-</span> <span>{{template.title}}</span> </div> <div class="creative-item-time"> <span>{{updateDateStr}}</span> </div> <div class="creative-item-operate"> <a href="/creative/edit/{{creativeId}}" target="_blank">编辑</a> <span class="creative-item-vline">|</span> <a id="creativeId-{{creativeId}}-rename" class="creative-item-rename">重命名</a> <span class="creative-item-vline">|</span> <a id="creativeId-{{creativeId}}-delete" class="creative-item-delete">删除</a> </div> </div> </script> </div> <% include footer %> <script type="text/javascript">var jsonData = <%- jsonData %></script> <script type="text/javascript" data-main="/javascripts/factory/list.js" src="/javascripts/lib/require-2.1.14.min.js"></script> </body> </html>
/** * list.js * Author: shen100 * Email: [email protected] * Create: 2014-10-28 16:39:17 * */ requirejs.config({ paths: { jquery: ‘/javascripts/lib/jquery-1.11.1.min‘, mustache: ‘/javascripts/lib/mustache-0.8.1‘, common: ‘/javascripts/common/cp‘ } }); var $, Mustache, common, Logger, ErrorCode; var AppType, Creative; function ModelProxy() {} ModelProxy.FIND_CREATIVES_RESULT = ‘findCreativesResult‘; ModelProxy.FIND_CREATIVES_FAULT = ‘findCreativesFault‘; ModelProxy.RENAME_CREATIVE_RESULT = ‘renameCreativeResult‘; ModelProxy.DELETE_CREATIVE_RESULT = ‘deleteCreativeResult‘; ModelProxy.prototype = { constructor: ModelProxy, init: function(data) { this.allListener = {}; this.findURL = ‘/creative/find/:tId/:page/:count‘; this.renameURL = ‘/creative/rename‘; this.deleteURL = ‘/creative/del‘; this.appTypes = data.appTypes; //所有的应用类型(1: web pc, 2: web mobile, 3: desktop等) this.categories = data.categories;//所有的分类 this.templates = data.templates; //所有的模板 this.curAppType = data.curAppType;//当前应用类型 this.curTemplateId = data.curTmpl; //当前选中的模板，0表示没选中任何模板 this.curCreatives = null; //当前显示的创意 this.count = 15; //每页显示多少个创意 this.page = 1; //当前页 this.cols = 3; //每行有几列 this.total = 0; //后台返回指定模板下的创意总数 this.pageCount = 0; //有多少页 this.pageGroup = 7; //分页组件当前显示多少页(除第一页，最后页外) this.curCategories = []; //当前应用类型下的分类 this.curTemplates = []; //当前应用类型下的模板 this.updateCurApp(); }, updateCurApp: function() { this.curCategories = []; this.curTemplates = []; for (var i = 0; i < this.categories.length; i++) { if(this.categories[i].appType == this.curAppType) { this.curCategories.push(this.categories[i]); } } for (var j = 0; j < this.templates.length; j++) { var categoryId = this.templates[j].categoryId; for (var k = 0; k < this.curCategories.length; k++) { if(categoryId == this.curCategories[k].categoryId) { this.curTemplates.push(this.templates[j]); break; } } } }, addEventListener: function(type, listener) { if(!this.allListener[type]) { this.allListener[type] = [listener]; }else { var found = false; for (var i = 0, len = this.allListener[type].length; i < len; i++) { if(this.allListener[type][i] == listener) { found = true; break; } } if(!found) { this.allListener[type].push(listener); } } }, removeEventListener: function(type, listener) { var listeners = this.allListener[type]; if(listeners) { for (var i = 0; i < listeners.length; i++) { if(listeners[i] == listener) { listeners.splice(0, 1); break; } } } }, dispatchEvent: function(event) { var listeners = this.allListener[event.type]; if(listeners) { for (var i = 0; i < listeners.length; i++) { var listener = listeners[i]; var data = {}; if(typeof listener == ‘object‘) { listener.func.call(listener.context, event); }else { listener.call(null, event); } } } }, findCreatives: function(data) { var request = new common.net.Request(); var url = this.findURL.replace(‘:tId‘, data.templateId); url = url.replace(‘:page‘, data.page); url = url.replace(‘:count‘, this.count); url = url + ‘?r=‘ + Math.random(); request.get(url, { onResult : onResult, onFault : onFault }); var self = this; function onResult(result) { if(result.error === ErrorCode.SUCCESS) { self.total = result.data.total; self.curCreatives = result.data.creatives; self.page = result.data.page; self.pageCount = Math.ceil(self.total / self.count); self.curTemplateId = parseInt(result.data.tId); } self.dispatchEvent({ type: ModelProxy.FIND_CREATIVES_RESULT, data: result }); } function onFault() { } }, renameCreative: function(creativeId, title) { creativeId = parseInt(creativeId); var request = new common.net.Request(); var templateId; for (var i = 0; i < this.curCreatives.length; i++) { if(this.curCreatives[i].creativeId === creativeId) { templateId = this.curCreatives[i].templateId; break; } } request.post(this.renameURL, { creativeId : creativeId, title : title, templateId : templateId }, { onResult : onResult, onFault : onFault }); var self = this; function onResult(result) { if(result.error === ErrorCode.SUCCESS) { for (var i = 0; i < self.curCreatives.length; i++) { if(self.curCreatives[i].creativeId === result.data.creativeId) { self.curCreatives[i].title = result.data.title; break; } } } self.dispatchEvent({ type: ModelProxy.RENAME_CREATIVE_RESULT, data: result }); } function onFault() { } }, deleteCreative: function(creativeId) { creativeId = parseInt(creativeId); var request = new common.net.Request(); request.post(this.deleteURL, { creativeId: creativeId }, { onResult : onResult, onFault : onFault }); var self = this; function onResult(result) { if(result.error === ErrorCode.SUCCESS) { for (var i = 0; i < self.curCreatives.length; i++) { if(self.curCreatives[i].creativeId === result.data.creativeId) { self.curCreatives.splice(i, 1); break; } } self.dispatchEvent({ type: ModelProxy.DELETE_CREATIVE_RESULT, data: result }); if(!self.curCreatives || self.curCreatives.length <= 0) { self.findCreatives({ templateId : modelProxy.curTemplateId, page : self.page }); } } } function onFault() { } } }; var modelProxy = new ModelProxy(); var toolBoxMediator = { init: function() { var self = this; var width = 1000; function onScroll() { if($(document).scrollTop() > $(‘#topline‘).height() + $(‘#header‘).height()) { $(‘#toolbar‘).css(‘position‘, ‘fixed‘); $(‘#toolbar‘).css(‘top‘, ‘0‘); $(‘#toolbar‘).css(‘left‘, ‘0‘); $(‘#container‘).css(‘margin-top‘, ($(‘#toolbar‘).height() + 16) + ‘px‘); $(‘#toolbar‘).css(‘width‘, ‘100%‘); if(width > $(window).width()) { $(‘#toolbar-box‘).css(‘width‘, $(window).width()); }else { $(‘#toolbar-box‘).css(‘width‘, width); } }else { $(‘#toolbar-box‘).css(‘width‘, width); if(width > $(window).width()) { $(‘#toolbar‘).width(1000); }else { $(‘#toolbar‘).css(‘width‘, ‘100%‘); } $(‘#toolbar‘).css(‘position‘, ‘static‘); $(‘#container‘).css(‘margin-top‘, ‘16px‘); } if(width > $(window).width()) { $(‘#topline‘).width(width); $(‘.footer‘).width(width); }else { $(‘#topline‘).css(‘width‘, ‘100%‘); $(‘.footer‘).css(‘width‘, ‘100%‘); } } $(window).scroll(function(event) { onScroll(); }); $(window).resize(function() { onScroll(); }); $(window).scroll(); modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) { self.renderNav(); }); }, render: function() { var rendered = Mustache.render($(‘#appTypeTmpl‘).html(), { appTypes: [{id: 1, title: "web pc"}]//modelProxy.appTypes }); $(‘#appTypeSelect‘).html(rendered); }, renderNav: function() { if(modelProxy.curTemplateId === 0) { $(‘#categoryNavSep‘).hide(); $(‘#templateNav‘).hide(); $(‘#categoryNav‘).html(‘全部‘); $(‘#categoryNav‘).show(); }else { for (var i = 0; i < modelProxy.curTemplates.length; i++) { if(modelProxy.curTemplates[i].tId === modelProxy.curTemplateId) { var title = modelProxy.curTemplates[i].title; var categoryId = modelProxy.curTemplates[i].categoryId; for (var j = 0; j < modelProxy.curCategories.length; j++) { if(modelProxy.curCategories[j].categoryId === categoryId) { var categoryTitle = modelProxy.curCategories[j].title; $(‘#categoryNav‘).html(categoryTitle); $(‘#categoryNav‘).show(); $(‘#categoryNavSep‘).show(); $(‘#templateNav‘).show(); $(‘#templateNav‘).html(title); break; } } break; } } } } }; var createPopupMediator = { canSubmit: true, init: function() { var self = this; $(‘#createCreativeBtn‘).click(function() { self.render(); var rendered = Mustache.render($(‘#popupAppTypeTmpl‘).html(), { appTypes: [{id: 1, title: "web pc"}] //modelProxy.appTypes }); $(‘#popupAppType‘).html(rendered); $(‘#popupAppType‘).val(modelProxy.curAppType); rendered = Mustache.render($(‘#popupCategoryTmpl‘).html(), { categories: modelProxy.curCategories }); $(‘#popupCategory‘).html(rendered); if(modelProxy.curTemplateId) { for (var i = 0; i < modelProxy.curTemplates.length; i++) { if(modelProxy.curTemplateId == modelProxy.curTemplates[i].tId) { $(‘#popupCategory‘).val(modelProxy.curTemplates以上是关于node的实践（项目三）的主要内容，如果未能解决你的问题，请参考以下文章