渲染前台的方式。
<!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: liushen@letv.com * 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[i].categoryId); break; } } } function renderTmplSelect() { var tArr = []; for (var i = 0; i < modelProxy.curTemplates.length; i++) { var categoryId = parseInt($('#popupCategory').val()); if(modelProxy.curTemplates[i].categoryId == categoryId) { tArr.push(modelProxy.curTemplates[i]); } } rendered = Mustache.render($('#popupTemplateTmpl').html(), { templates: tArr }); $('#popupTemplate').html(rendered); } renderTmplSelect(); if(modelProxy.curTemplateId) { $('#popupTemplate').val(modelProxy.curTemplateId); } $('#popupCategory').change(function() { renderTmplSelect(); }); function closePopup() { $('#createPopup').remove(); } $('#popupCreateClose').click(closePopup); $('#popupCreateCancel').click(closePopup); $('#popupCreateSubmit').click(function() { if(!self.canSubmit) { return; } var title = $.trim($('#popupTitleInput').val()); var templateId = $('#popupTemplate').val(); if(!title) { return $('#popupCreateTip').html('标题不能为空'); } if(title.length > Creative.MAX_TITLE_LENGTH) { return $('#popupCreateTip').html('标题长度不能多于' + Creative.MAX_TITLE_LENGTH + '个字符'); } self.canSubmit = false; var req = new common.net.Request(); req.post('/creative/add', { title : title, templateId : templateId, appType : modelProxy.curAppType }, { onResult: function(result) { self.canSubmit = true; if(result.error === ErrorCode.SUCCESS) { $('#createPopup').remove(); location.href = '/creative/edit/' + result.data.creativeId; }else if(result.error === ErrorCode.CREATIVE_TITLE_EXIST) { $('#popupCreateTip').html('名称已存在，请改名'); } }, onFault: function() { self.canSubmit = true; $('#popupCreateTip').html('新建失败'); } }); }); }); }, render: function() { if(this.createPopup) { this.createPopup.remove(); } var rendered = Mustache.render($('#createPopupTmpl').html()); this.createPopup = $(rendered); $('body').append(this.createPopup); var left = ($(window).width() - this.createPopup.width()) / 2; var top = ($(window).height() - this.createPopup.height()) / 2; this.createPopup.css('left', left); this.createPopup.css('top', top); var self = this; $('.popup-create-title').mousedown(function(event) { event.stopImmediatePropagation(); event.preventDefault(); var pageX = event.pageX; var pageY = event.pageY; var offset = self.createPopup.offset(); $('body').mousemove(function(event) { var offsetX = event.pageX - pageX; var offsetY = event.pageY - pageY; self.createPopup.offset({ left : offset.left + offsetX, top : offset.top + offsetY }); }); $('body').mouseup(function(event) { $('body').unbind(); }); }); } }; var sidebarMediator = { init: function() { modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) { $('#templateId-' + modelProxy.curTemplateId + '-title').css('color', 'rgb(250, 125, 60)'); }); }, render: function() { var rendered = Mustache.render($('#catetoryTmpl').html(), { categories: modelProxy.curCategories }); $('#sidebarCategory').html(rendered); var cateTmpl = {}; for (var i = 0; i < modelProxy.curTemplates.length; i++) { var categoryId = modelProxy.curTemplates[i].categoryId; if(!cateTmpl[categoryId]) { cateTmpl[categoryId] = []; } cateTmpl[categoryId].push(modelProxy.curTemplates[i]); } for (var i = 0; i < modelProxy.curCategories.length; i++) { var categoryId = modelProxy.curCategories[i].categoryId; var categoryTemplate = $('#categoryId-' + categoryId + '-templates'); for (var j = 0; j < cateTmpl[categoryId].length; j++) { var rendered = Mustache.render($('#templateTmpl').html(), cateTmpl[categoryId][j]); categoryTemplate.append($(rendered)); } var categoryIcon = $('#categoryId-' + categoryId + '-icon'); var xPos, yPos; xPos = '-' + (20 * i) + 'px'; if(modelProxy.curAppType == AppType.WEB_PC.id) { yPos = '-' + 34 + 'px'; } categoryIcon.css('width', '18px'); categoryIcon.css('height', '18px'); categoryIcon.css('background-position', xPos + ' ' + yPos); } $('.sidebar-template-label').click(function() { var templateId = parseInt($(this).attr('id').split('-')[1]); if(templateId != modelProxy.curTemplateId) { $('#templateId-' + modelProxy.curTemplateId + '-title').css('color', '#777'); } modelProxy.findCreatives({ templateId : templateId, page : 1 }); }); $('.sidebar-template-label').mouseover(function() { $(this).css('color', '#fa7d3c'); }); $('.sidebar-template-label').mouseout(function() { var templateId = parseInt($(this).attr('id').split('-')[1]); if(modelProxy.curTemplateId != templateId) { $(this).css('color', '#777'); } }); } }; var creativeBoxMediator = { init: function() { var self = this; modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) { self.render(); }); modelProxy.addEventListener(ModelProxy.RENAME_CREATIVE_RESULT, function(event) { self.updateCreativeName(event.data); }); modelProxy.addEventListener(ModelProxy.DELETE_CREATIVE_RESULT, function(event) { self.removeCreativeItem(); }); }, removeCreativeItem: function() { this.render(); }, render: function() { var self = this; $('#creativeBox').html(''); if(modelProxy.total) { var creatives = modelProxy.curCreatives; var rows = Math.ceil(creatives.length / modelProxy.cols); var maxCount = rows * modelProxy.cols; for (var i = 0; i < creatives.length; i++) { creatives[i].updateDateStr = common.util.Util.formatTimeStr(creatives[i].updateDate); if(creatives[i].createDate == creatives[i].updateDate) { creatives[i].updateDateStr = '创建于：' + creatives[i].updateDateStr; }else { creatives[i].updateDateStr = '更新于：' + creatives[i].updateDateStr; } var rendered = Mustache.render($('#creativeTmpl').html(), creatives[i]); var creativeDOM = $(rendered); if(i + modelProxy.cols < maxCount) { if((i + 1) % modelProxy.cols == 0) { creativeDOM.css('border-bottom', '1px solid #CCCCCC'); }else { creativeDOM.css('border-right', '1px solid #CCCCCC'); creativeDOM.css('border-bottom', '1px solid #CCCCCC'); } }else { if(i != maxCount - 1) { creativeDOM.css('border-right', '1px solid #CCCCCC'); } } $('#creativeBox').append(creativeDOM); } $('.creative-item-rename').click(function() { $('.creative-rename-popup').hide(); $('.creative-delete-popup').hide(); $('.creative-rename-popup-tip').hide(); $('.creative-rename-popup-button-box').css('margin-top', '10px'); var creativeId = $(this).attr('id').split('-')[1]; var popup = $('#creativeId-' + creativeId + '-rename-popup'); popup.show(); var creativeItem = $('#creativeId-' + creativeId + '-creative-item'); var titleDOM = $(creativeItem.find('.creative-item-title')[0]); popup.find('.creative-rename-popup-input').val(titleDOM.html()); }); $('.creative-rename-popup-input').blur(function() { $(this).css('border-color', '#C8C8C8'); }); $('.creative-rename-popup-input').focus(function() { $(this).css('border-color', '#989898'); }); $('.creative-rename-submit').click(function() { var creativeId = $(this).attr('id').split('-')[1]; var popup = $('#creativeId-' + creativeId + '-rename-popup'); var creativeItem = $('#creativeId-' + creativeId + '-creative-item'); var titleDOM = $(creativeItem.find('.creative-item-title')[0]); var title = popup.find('.creative-rename-popup-input').val(); title = $.trim(title); if(titleDOM.html() == title) { popup.hide(); }else if(!title) { $('.creative-rename-popup-tip').html('标题不能为空'); $('.creative-rename-popup-tip').show(); $('.creative-rename-popup-button-box').css('margin-top', '0px'); }else if(title.length > Creative.MAX_TITLE_LENGTH) { $('.creative-rename-popup-tip').html('标题长度不能多于' + Creative.MAX_TITLE_LENGTH + '个字符'); $('.creative-rename-popup-tip').show(); $('.creative-rename-popup-button-box').css('margin-top', '0px'); }else { modelProxy.renameCreative(creativeId, title); } }); function onRenameCancel() { var creativeId = $(this).attr('id').split('-')[1]; $('#creativeId-' + creativeId + '-rename-popup').hide(); } $('.creative-rename-cancel').click(onRenameCancel); $('.creative-rename-popup-close').click(onRenameCancel); $('.creative-item-delete').click(function() { $('.creative-rename-popup').hide(); $('.creative-delete-popup').hide(); var creativeId = $(this).attr('id').split('-')[1]; $('#creativeId-' + creativeId + '-delete-popup').show(); }); $('.creative-delete-submit').click(function() { var creativeId = $(this).attr('id').split('-')[1]; modelProxy.deleteCreative(creativeId); }); function onDeleteCancel() { var creativeId = $(this).attr('id').split('-')[1]; $('#creativeId-' + creativeId + '-delete-popup').hide(); } $('.creative-delete-cancel').click(onDeleteCancel); $('.creative-delete-popup-close').click(onDeleteCancel); }else { var rendered = Mustache.render($('#noCreativeTmpl').html()); $('#creativeBox').append($(rendered)); } }, updateCreativeName: function(result) { if(result.error === ErrorCode.SUCCESS) { var creative = result.data; $('#creativeId-' + creative.creativeId + '-creative-item-title').html(creative.title); $('#creativeId-' + creative.creativeId + '-rename-popup').hide(); }else if(result.error === ErrorCode.CREATIVE_TITLE_EXIST) { $('.creative-rename-popup-tip').html('名称已存在，请改名'); $('.creative-rename-popup-tip').show(); $('.creative-rename-popup-button-box').css('margin-top', '0px'); } } }; var pagingMediator = { init: function() { var self = this; modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) { self.render(); }); }, render: function() { $('#paging').html(''); var pages = []; var pageItem; if(modelProxy.page < modelProxy.pageGroup || modelProxy.pageCount <= modelProxy.pageGroup) { var min = Math.min(modelProxy.pageCount, modelProxy.pageGroup); for (var i = 0; i < min; i++) { pageItem = { page : i + 1, label : i + 1 }; pages.push(pageItem); } if(modelProxy.pageGroup < modelProxy.pageCount) { pages.push({ page : 0, label : '...' }); pages.push({ page : modelProxy.pageCount, label : modelProxy.pageCount }); } }else { var minPage = modelProxy.pageCount - modelProxy.pageGroup + 1; var maxPage = modelProxy.pageCount; if(modelProxy.page >= minPage && modelProxy.page <= maxPage) { for (var i = minPage; i <= maxPage; i++) { pageItem = { page : i, label : i } pages.push(pageItem); } if(modelProxy.pageGroup < modelProxy.pageCount) { pages.unshift({ page : 0, label : '...' }); pages.unshift({ page : 1, label : 1 }); } }else { var range = (modelProxy.pageGroup - 1) / 2; var startPage = modelProxy.page - range; var endPage = modelProxy.page + range; for (var i = startPage; i <= endPage; i++) { pageItem = { page : i, label : i } pages.push(pageItem); } pages.unshift({ page : 0, label : '...' }); pages.unshift({ page : 1, label : 1 }); pages.push({ page : 0, label : '...' }); pages.push({ page : modelProxy.pageCount, label : modelProxy.pageCount }); } } if(modelProxy.page > 1) { pageItem = { page: modelProxy.page - 1, label: '上一页' }; pages.unshift(pageItem); } if(modelProxy.page < modelProxy.pageCount) { pageItem = { page: modelProxy.page + 1, label: '下一页' }; pages.push(pageItem); } for (var i = 0; i < pages.length; i++) { var rendered = Mustache.render($('#pagingTmpl').html(), pages[i]); var pagingItem = $(rendered); if(pages[i].page == modelProxy.page) { pagingItem.addClass('paging-btn-selected'); } $('#paging').append(pagingItem); } $('.paging-btn').mouseover(function() { var page = parseInt($(this).attr('id').split('-')[1]); if(page != modelProxy.page) { $(this).addClass('paging-btn-hover'); } }); $('.paging-btn').mouseout(function() { var page = parseInt($(this).attr('id').split('-')[1]); if(page != modelProxy.page) { $(this).removeClass('paging-btn-hover'); } }); $('.paging-btn').click(function() { var page = parseInt($(this).attr('id').split('-')[1]); if(page == modelProxy.page || page === 0) { return; } modelProxy.findCreatives({ templateId : modelProxy.curTemplateId, page : page }); }); } }; require(['jquery', 'mustache', 'common'], function(_$, _Mustache, _common) { $ = _$; Mustache = _Mustache; common = _common; Logger = common.log.Logger; AppType = common.model.AppType; Creative = common.model.Creative; ErrorCode = common.error.ErrorCode; modelProxy.init({ templates : jsonData.templates, categories : jsonData.categories, appTypes : jsonData.appTypes, curAppType : jsonData.curAppType, curTmpl : jsonData.curTmpl }); toolBoxMediator.init(); // 平台 toolBoxMediator.render(); createPopupMediator.init();//点击右上角的+然后出现的隐藏框 sidebarMediator.init(); //左侧的菜单 sidebarMediator.render(); creativeBoxMediator.init(); pagingMediator.init(); modelProxy.findCreatives({ templateId : modelProxy.curTemplateId, page : 1 }); });