이 플러그인은 이전 기사 JQuery 템플릿 플러그인-jquery.tmpl에서 소개되었습니다. 때로는 동적 Ajax를 사용하여 템플릿이나 데이터를 로드하고, URL 매개변수나 기타 정보를 기반으로 다양한 템플릿과 데이터를 로드해야 합니다. 내 프로젝트 중 하나에 이 요구 사항이 있으므로 특별히 jquery 도구 함수로 작성하고 로컬 데이터와 Ajax 데이터 로딩 템플릿 및 데이터 메서드를 추가했습니다.
매개변수 설명:
Tmpl: function(template, data, fun)
1: template:
1): url: ajax의 로딩 URL입니다. ajax는 다음과 같은 경우에만 해당됩니다. Remote=true인 경우에만 로드됩니다.
2): data: ajax에 대한 매개변수 로드
3) templateSelector: 원격 템플릿 선택기이며, remote= false인 경우에만 사용됩니다.
4) Remote: true는 ajax, false는 로컬 데이터,
5) 캐시: 템플릿을 캐시할지 여부를 나타냅니다.
2: data:
1): url:은 ajax의 로딩 URL이고, ajax는 Remote= true인 경우에만 로드됩니다.
2): data: ajax에 대한 매개변수 로드
3) templateData: 로컬 데이터이며, remote= false인 경우에만 사용됩니다.
4) Remote: true는 ajax, false는 로컬 데이터,
5) 캐시: 템플릿을 캐시할지 여부를 나타냅니다.
3: fun은 콜백 함수입니다.
fun(jquery.tmpl object, template script, data)
구체 코드는 다음과 같습니다.
; (function($) {
$.extend({
Tmpl_Data : function(te, data, fun, templatecache) {
data = jQuery.extend({ data: "", url: "", templateData: {}, 원격: true, 캐시: true }, data); 🎜>if (!data.remote) {
fun(te.tmpl(data.templateData), te, data.templateData)
if (!templatecache) {
te.remove(); 🎜>}
return ;
}
var da = te.data("objdata")
if (data.cache && da != null && da != undefine) fun(te.tmpl(da ), te, da);
if (!templatecache) {
te.remove()
}
return; ajax({
유형: "GET",
데이터: data.data,
url: data.url,
dataType: "json",
캐시: false,
컨텍스트 : { 템플릿: te, 데이터 : 데이터 },
성공: function(tmpldata) {
fun(this.template.tmpl(tmpldata), this.template, tmpldata)
if (data.cache); ) {
this.template.data("objdata", tmpldata);
}
if (!templatecache) {
this.template.remove(); ,
error: function (e) {
throw "get data error(" this.data.url "?" this.data.data "):" e
}
});
},
JquerySelecotrCharChange: function(str) {
return str.replace(".", "\.").replace("#", "\#")
},
Tmpl: function( template, data, fun) {
template = jQuery.extend({ data: "", url: "", templateSelector: "", 원격: true, 캐시: true }, template) ;
if (!template.remote) {
$.Tmpl_Data($(template.templateSelector), data, fun, true)
return;
}
var te = null;
try {
te = $("script:[url='" $.JquerySelecotrCharChange(template.url "?" template.data) "']")
}
catch(e) {
}
if (template.cache && te != null && te.length > 0) {
$.Tmpl_Data(te, data, fun, template.cache)
return;
}
$.ajax({
type: "GET",
data: template.data,
url: template.url,
dataType: "html",
cache: false,
context: { template: template, data: data },
error: function(e) {
throw "get template error(" this.template.url "?" this. template.data "):" e;
},
성공: function(tmpltemplate) {
var te = $(' ').appendTo(document.body)
te.attr("url", (this.template.url "?" this.template.data)); Tmpl_Data(te, this.data , fun, this.template.cache)
}
})
})
테스트 코드 :
프론트 데스크 :
코드 복사
코드는 다음과 같습니다
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>
<제목>
<본문>
