require.js及模板引擎的使用实例
/*
@标题：<strong><span style="font-size:18px;"> product.js</span></strong>
@日志：
创建文件
*/
define(function (require, exports, module) {
require('jquery');
require('mustache');
require('jPaginate');
var Step = {
//产品模板
product_Temp: "",
//搜索条件模板
Search_ConditionItem: "",
init: function () {
Step.product_Temp = $("#List_Produt_Item").html();
Step.Search_ConditionItem = $("#Search_ConditionItem").html();
Step.ListProduct_Get(1);
},
//产品
ListProduct_Get: function (pageIndex) {
require.async("site/product/productController", function (mod) {
mod.GetServer_Product(pageIndex, Step.ListProduct_Bander);
});
},
//绑定产品
ListProduct_Bander: function (pageIndex, backData) {
var data = eval(backData);
//总产品数量
var pageCount = parseInt(data.tatol);
$("#Hid_ProCount").val(pageCount);
$("#Tatol_Pro").html("共" + pageCount + "个商品");
//总页数
$("#Page_Tatol").html(data.PageTatol);
var htmlData = "";
var arrayPIDS = [];
if (data.list != null) {
$.each(data.list, function (index, item) {
arrayPIDS.push(item.Id);
item.index = index + 1;
htmlData += Mustache.render(Step.product_Temp, item);
});
}
if (data.list != null && pageCount > 0) {
$("#search_nopro").hide();
$("#List_Produt_Item").html(htmlData);
$("#List_Produt_Item").show();
var pc = pageCount / 30;
if (pageCount % 30 > 0)
pc = pc + 1;
if (pc > 1)
Step.Roll_Page(pageIndex, pc);
} else {
$("#List_Produt_Item").hide();
$("#search_nopro").show();
$("#RollPage_Product").hide();
}
},
//翻页
Roll_Page: function (starIndex, pageCount) {
$("#RollPage_Product").show();
$("#RollPage_Product").paginate({
count: parseInt(pageCount),//总页数,
start: starIndex,//开始页码
display: 30, //在分页条上显示的个数,分页数等于或超过本设置会显示设置的个数,不够的话会显示真实个数,不过就不会出现滚动效果了
border: true,//是否显示外框
border_color: '#E33A3D',
text_color: '#370100',//文字颜色
background_color: '#FCF2E0',//背景颜色
background_hover_color: '#DC1011',//鼠标放上去时背景的颜色
text_hover_color: '#FFFFFF',//鼠标放上去时文字的颜色
rotate: true, //是否滚动
images: true, //
mouse: 'slide', //可选值为'press'和'slide',具体差别请自己体验.
onChange: function (page) {//本插件唯一可触发的事件,在点击页数的时候触发,只传过来当前被选中的页数,我想这其实足够了.
$("#Page_Index").html(page);
Step.ListProduct_Get(page);
}
});
},
//搜索点击事件
Search_Click: function (low, up) {
$("#Key_Name").val("");
//价格与产地搜索
$(".Search_Key a").unbind("click");
$(".Search_Key a").bind("click", function () {
//选中效果
$(this).siblings().removeClass("on");
$(this).addClass("on");
var data_Name = "";//类型名称
var data_type = $(this).attr("data-type");//类型
var data_value = $(this).attr("data-value");//值
var data_txt = $(this).html();//文本
switch (data_type) {
case "province": data_Name = "产地"; break;
case "money": data_Name = "价格"; break;
}
var Key_Count = $("#Search_Condition").find("a").length;
if ($("#Search_Condition").find("a").length > 0) {
//条件赋值搜索
$("#Search_Condition").find("a").each(function (index) {
var data_type2 = $(this).attr("data-type");
var data_value2 = $(this).attr("data-value");
if (data_type == data_type2) {
$(this).attr("data-value", data_value);
$(this).prev().html(data_Name + "：" + data_txt);
return false;
}
else {
if (index + 1 == Key_Count) {
var searchItem = Step.Search_ConditionItem.replace(/(®date_Name)/g, data_Name).replace(/(®data_txt)/g, data_txt).replace(/(®data_type)/g, data_type).replace(/(®data_value)/g, data_value);
var searchHtml = $("#Search_Condition").html();
$("#Search_Condition").html(searchHtml + searchItem);
}
}
});
}
else {
var searchItem = Step.Search_ConditionItem.replace(/(®date_Name)/g, data_Name).replace(/(®data_txt)/g, data_txt).replace(/(®data_type)/g, data_type).replace(/(®data_value)/g, data_value);
$("#Search_Condition").html(searchItem);
}
$("#Search_Condition").show();
Step.ListProduct_Get(1);
});
}
};
return Step;
});
/*
@标题：<strong><span style="font-size:18px;">productController.js</span></strong>
@日志
@作者：
@时间：2014年4月15日
*/
define(function (require, exports, module) {
require("jquery");
var Sequence = {
//产品
GetServer_Product: function (pageIndex, backFunction) {
var searchData = {
pageIndex: pageIndex,//页面索引
OrderFiled: $("#Hid_OrderName").val(),//排序字段
OrderDesc: $("#Hid_Order").val(), //排序
KeyName: $("#Hid_KeyName").val(),//产品名称
LowPrice: $("#lowprice").val(),//产品名称
UpPrice: $("#upprice").val(),//产品名称
CateId: $("#Hid_cateid").val(),//产品类别
KeyKeys: Sequence.Get_SearchKey()//组合搜索词
};
//查询列表绑定
var uri = "/Products/Product_List";
$.ajax({
type: "post",
url: uri,
dataType: "json",
async: true, //true 异步 false为同步请求
data: {
pageIndex: searchData.pageIndex,//页面索引
OrderFiled: searchData.OrderFiled,//排序字段
OrderDesc: searchData.OrderDesc, //排序
KeyName: searchData.KeyName,//产品名称
KeyKeys: searchData.KeyKeys
},
success: function (msg) {
backFunction(pageIndex, msg)
},
error: function (s) {
// alert("服务器连接错误,返回状态：" + s.status);
}
});
}
};
return Sequence;
});
seajs.用方法
<script type="text/javascript">
seajs.use("/Scripts/site", function (rotate) {
rotate.load("site/_Layout/_Layout");
});
</script>
requirejs引用方法
requirejs(["site/_Layout/_Layout"]);