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 实践项目 (一 ...
随机推荐
- linux 创建和删除目录
创建目录命令 mkdir 目录名 [root@wang whp]# mkdir catalog[root@wang whp]# lscatalog [root@wang whp]# mkdir cat ...
- iOS网络编程--NSConnection的同步连接与异步连接
// // ZFViewController.m // 0628-表单验证 // // Created by zfan on 14-6-28. // Copyright (c) 2014年 zfan. ...
- eclipse在Ubuntu 13.04下的安装过程及问题小记
一.eclipse安装过程 首先确保在安装eclipse之前已经安装好Java虚拟机 1. eclipse官网下载压缩包 下载地址:http://www.eclipse.org/downloads/? ...
- NPOI 读取excel到DataTable 读取隐藏列 读取公式列
处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列 不隐藏 b.读取Cell时 先判断是否的包含公式 相应代码如下: public sta ...
- Windows事件ID大全
51 Windows 无法找到网络路径.请确认网络路径正确并且目标计算机不忙或已关闭.如果 Windows 仍然无法找到网络路径,请与网络管理员联系. 52 由于网络上有重名,没有连接.请到“控制面板 ...
- 2D Skeletal Animation Ready
骨骼动画 Cool 昨天研究了一天的2D骨骼动画,自己动手做了骨骼动画,感觉比用序列帧做动画方便多了,非常Cool ! 刚开始做骨骼动画用的是一整张图,做动画时在分配完权重之后,拉伸顶点上连接着的其它 ...
- Jenkins学习六：修改Jenkins用户的密码
很多时候在使用jenkins的时候忘记密码了,遇到这种情况,可以看看下面的讲解. Jenkins专有用户的数据存放在JENKINS_HOME/users目录.users目录的结构你一看就懂.users ...
- DataGridView 行、列的隐藏和删除
) 行.列的隐藏 [VB.NET] ' DataGridView1的第一列隐藏 DataGridView1.Columns(0).Visible = False ' DataGridView1的第一行 ...
- 转：Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html
- Android 距离传感器修复 修复打电话黑屏 无法快速唤醒屏幕的BUG
接触Android Xposed开发也很久了,学了这么久的Java,也该弄点东西出来了, public ProximitySensor(Context paramContext, AudioModeP ...