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: 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 = ; //每页显示多少个创意
this.page = ; //当前页
this.cols = ; //每行有几列
this.total = ; //后台返回指定模板下的创意总数
this.pageCount = ; //有多少页
this.pageGroup = ; //分页组件当前显示多少页(除第一页，最后页外) this.curCategories = []; //当前应用类型下的分类
this.curTemplates = []; //当前应用类型下的模板 this.updateCurApp();
},
updateCurApp: function() {
this.curCategories = [];
this.curTemplates = [];
for (var i = ; i < this.categories.length; i++) {
if(this.categories[i].appType == this.curAppType) {
this.curCategories.push(this.categories[i]);
}
}
for (var j = ; j < this.templates.length; j++) {
var categoryId = this.templates[j].categoryId;
for (var k = ; 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 = , 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 = ; i < listeners.length; i++) {
if(listeners[i] == listener) {
listeners.splice(, );
break;
}
}
}
},
dispatchEvent: function(event) {
var listeners = this.allListener[event.type];
if(listeners) {
for (var i = ; 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 = ; 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 = ; 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 = ; i < self.curCreatives.length; i++) {
if(self.curCreatives[i].creativeId === result.data.creativeId) {
self.curCreatives.splice(i, );
break;
}
}
self.dispatchEvent({
type: ModelProxy.DELETE_CREATIVE_RESULT,
data: result
});
if(!self.curCreatives || self.curCreatives.length <= ) {
self.findCreatives({
templateId : modelProxy.curTemplateId,
page : self.page
});
}
}
}
function onFault() { }
}
}; var modelProxy = new ModelProxy(); var toolBoxMediator = {
init: function() {
var self = this;
var width = ; function onScroll() {
if($(document).scrollTop() > $('#topline').height() + $('#header').height()) {
$('#toolbar').css('position', 'fixed');
$('#toolbar').css('top', '');
$('#toolbar').css('left', '');
$('#container').css('margin-top', ($('#toolbar').height() + ) + '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();
}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: , title: "web pc"}]//modelProxy.appTypes
});
$('#appTypeSelect').html(rendered);
},
renderNav: function() {
if(modelProxy.curTemplateId === ) {
$('#categoryNavSep').hide();
$('#templateNav').hide();
$('#categoryNav').html('全部');
$('#categoryNav').show();
}else {
for (var i = ; 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 = ; 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: , 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 = ; 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 = ; 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()) / ;
var top = ($(window).height() - this.createPopup.height()) / ;
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 = ; 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 = ; i < modelProxy.curCategories.length; i++) {
var categoryId = modelProxy.curCategories[i].categoryId;
var categoryTemplate = $('#categoryId-' + categoryId + '-templates');
for (var j = ; 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 = '-' + ( * i) + 'px';
if(modelProxy.curAppType == AppType.WEB_PC.id) {
yPos = '-' + + '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('-')[]); if(templateId != modelProxy.curTemplateId) {
$('#templateId-' + modelProxy.curTemplateId + '-title').css('color', '#777');
}
modelProxy.findCreatives({
templateId : templateId,
page :
});
}); $('.sidebar-template-label').mouseover(function() {
$(this).css('color', '#fa7d3c');
});
$('.sidebar-template-label').mouseout(function() {
var templateId = parseInt($(this).attr('id').split('-')[]);
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 = ; 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 + ) % modelProxy.cols == ) {
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 - ) {
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('-')[];
var popup = $('#creativeId-' + creativeId + '-rename-popup');
popup.show();
var creativeItem = $('#creativeId-' + creativeId + '-creative-item');
var titleDOM = $(creativeItem.find('.creative-item-title')[]);
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('-')[];
var popup = $('#creativeId-' + creativeId + '-rename-popup');
var creativeItem = $('#creativeId-' + creativeId + '-creative-item');
var titleDOM = $(creativeItem.find('.creative-item-title')[]);
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('-')[];
$('#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('-')[];
$('#creativeId-' + creativeId + '-delete-popup').show();
}); $('.creative-delete-submit').click(function() {
var creativeId = $(this).attr('id').split('-')[];
modelProxy.deleteCreative(creativeId);
}); function onDeleteCancel() {
var creativeId = $(this).attr('id').split('-')[];
$('#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 = ; i < min; i++) {
pageItem = {
page : i + ,
label : i +
};
pages.push(pageItem);
}
if(modelProxy.pageGroup < modelProxy.pageCount) {
pages.push({
page : ,
label : '...'
});
pages.push({
page : modelProxy.pageCount,
label : modelProxy.pageCount
});
}
}else {
var minPage = modelProxy.pageCount - modelProxy.pageGroup + ;
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 : ,
label : '...'
});
pages.unshift({
page : ,
label :
});
}
}else {
var range = (modelProxy.pageGroup - ) / ;
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 : ,
label : '...'
});
pages.unshift({
page : ,
label :
});
pages.push({
page : ,
label : '...'
});
pages.push({
page : modelProxy.pageCount,
label : modelProxy.pageCount
});
}
}
if(modelProxy.page > ) {
pageItem = {
page: modelProxy.page - ,
label: '上一页'
};
pages.unshift(pageItem);
}
if(modelProxy.page < modelProxy.pageCount) {
pageItem = {
page: modelProxy.page + ,
label: '下一页'
};
pages.push(pageItem);
}
for (var i = ; 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('-')[]);
if(page != modelProxy.page) {
$(this).addClass('paging-btn-hover');
}
});
$('.paging-btn').mouseout(function() {
var page = parseInt($(this).attr('id').split('-')[]);
if(page != modelProxy.page) {
$(this).removeClass('paging-btn-hover');
}
}); $('.paging-btn').click(function() {
var page = parseInt($(this).attr('id').split('-')[]);
if(page == modelProxy.page || page === ) {
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 :
});
});
node的实践（项目三）的更多相关文章
- android 实践项目三
android 实践项目三 本周我主要完成的任务是将代码进行整合,然后实现百度地图的定位与搜索功能.在这次实现的 图形界面如下: 在本周的工作中主要的实现出来定位与收索的功能,在地图中能实现了定位,显 ...
- python实践项目三：将列表添加到字典
1.创建一个字典,其中键是字符串,描述一个物品,值是一个整型值,说明有多少该物品.例如,字典值{'rope': 1, 'torch': 6, 'gold coin': 42, 'dagger': 1, ...
- Cookie和Session在Node.JS中的实践（三）
Cookie和Session在Node.JS中的实践(三) 前面作者写的COOKIE篇.SESSION篇,算是已经比较详细的说明了两者间的区别.机制.联系了.阅读时间可能稍长,因为作者本身作图也做了不 ...
- React 实践项目 （三）
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...
- Retrofit 2.0 超能实践（三），轻松实现文件/多图片上传/Json字符串
文:http://blog.csdn.net/sk719887916/article/details/51755427 Tamic 简书&csdn同步 通过前两篇姿势的入门 Retrofit ...
- kafka原理和实践（三）spring-kafka生产者源码
系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...
- Xamarin.Android开发实践（三）
原文:Xamarin.Android开发实践(三) 一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没 ...
- python编程快速上手之第10章实践项目参考答案
本章主要讲了python程序的调试,当程序有BUG或异常的时候,我们如何调试代码找出问题点.其实在本章之前的章节我们做练习的时候都会遇到各种各样的错语和异常,最初当不知道程序哪里出错的情况下不可否 ...
- python编程快速上手之第9章实践项目参考答案
本章介介绍了shutil,zipfile模块的使用,我们先来认识一下这2个模块吧. 一.shutil模块 shutil模块主要用于对文件或文件夹进行处理,包括:复制,移动,改名和删除文件,在shuti ...
- React 实践项目 （五）
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一 ...
随机推荐
- Python Backup Files
近来书写 Python 脚本进行替换以前的 shell 脚本,发现 Python 优于 shell 的最直观的一点Python 结构明了,可读性高(本人认为)在此做一些记录 本次记录利用 Python ...
- windows server 2003下安装.net framework 3.5 一直安装不成功
安装包是在微软下载中心下的197m的文件 重启了也是不行,最后 找到.net framework 3.5 sp1 一个237m的安装包 安装成功了! Congratulations !
- Linux上Eclipse项目右键菜单没有Maven
在Centos 7上安装了eclipse以后,着实很兴奋.eclipse luna版本自带maven.但是用mvn eclipse:eclipse创建的java工程,在右键菜单居然没有Maven按钮, ...
- 用Java实现单链表的基本操作
笔试题中经常遇到单链表的考题,下面用java总结一下单链表的基本操作,包括添加删除节点,以及链表转置. package mars; //单链表添加,删除节点 public class ListNode ...
- openfire+asmack搭建的安卓即时通讯（六） 15.4.16
啊啊啊啊啊啊啊啊,这东西越做越觉得是个深坑啊! 1.SharedPreferences.Editor的密码保存和自动登录: 首先还是从主界面开始,因为要提升一下用户体验自然要加入保存密码和自动登录的功 ...
- python中的自测语句是什么？
if __name__ == '__main__': main() 以上
- zstu-3769 数回文子串
思路:用manacher求出每个位置的半径,相加即可. 代码:[rad[i]/2]即i这个位置的回文半径,添加的'#'代表长度为偶数的串. #include<stdio.h> #inclu ...
- 第22章 DLL注入和API拦截（3）
22.6 API拦截的一个例子 22.6.1 通过覆盖代码来拦截API (1)实现过程 ①在内存中对要拦截的函数(假设是Kernel32.dll中的ExitProcess)进行定位,从而得到它的内存地 ...
- AC日记——神奇的幻方 洛谷 P2615（大模拟）
题目描述 幻方是一种很神奇的N*N矩阵:它由数字1,2,3,……,N*N构成,且每行.每列及两条对角线上的数字之和都相同. 当N为奇数时,我们可以通过以下方法构建一个幻方: 首先将1写在第一行的中间. ...
- Unity-WIKI 之 DrawArrow
组件作用 Unity画方向箭头类库,在Scene视图或在Game视图打开Gizmos查看效果 效果预览 wiki地址 http://wiki.unity3d.com/index.php/DrawA ...