Json2Template.js jquery 기반 플러그인은 JavaScript 개체를 Html template

코드 복사 코드는 다음과 같습니다.

$("#div").bindTemplate({ 
소스 : json 객체, 
템플릿 : null | $("#template") | "{{object}}
", 
dateFormat : "d.m.y", 
tagOpen : "{{", 
tagClose : "}}" 
}); 

bindTemplate(data): 데이터 객체를 템플릿에 바인딩하는 작업 방법

source : json 형식의 데이터 소스

template:

null 템플릿이 제공되지 않으며, InnerHtml은 페이지에 정의된 html 구조를 사용하여
$("#template")를 출력합니다. template
"

" 템플릿 직접 정의
dateFormat: 시간 형식 지정 방법

tagOpen: 시작 태그 태그

tagClose : 종료 태그 태그

그 중 dateFormat, tagOpen, tagClose는 null일 수 있으며 기본 구성을 채택하고 있으며, 기본 tagOpen 및 tagClose는 "{{" 및 "}}로 표시되어 있음을 밝힐 필요가 있습니다. "

Json2Template 적용
Json2Template의 간단한 사용법을 보기 위해 작은 예를 들어보겠습니다.

빈 MVC3 프로젝트 만들기

먼저 전달된 데이터

코드 복사 코드는 다음과 같습니다.

 
public class UserInfo 
{ 
공개 int ID { get; set; } 
public int Age { get; set; >} 

 
실제 애플리케이션 시나리오에서는 데이터베이스를 쿼리하여 획득하므로 가상 데이터 수집

코드 복사 코드는 다음과 같습니다. private IList InitUserInfo()

{

IList users = new List(); users.Add(new UserInfo () { ID = 1, 이름 = "Chenkun", 나이 = 21, 주소 = "Suzhou" }) 
users.Add(new UserInfo() { ID = 2, 이름 = " Zhangsan", 나이 = 21 , 주소 = "베이징" }); 
users.Add(new UserInfo() { ID = 3, 이름 = "Lisi", 나이 = 21, 주소 = "허난" }); 
users.Add( new UserInfo() { ID = 4, 이름 = "Wangwu", 나이 = 21, 주소 = "Shanghai" }) 
users.Add(new UserInfo() { ID = 5, 이름 = "Zhaoliu", 나이 = 21, 주소 = "광저우" }); 
users.Add(new UserInfo() { ID = 6, 이름 = "Huqi", 나이 = 21, 주소 = "충칭" }) ; 
return users ; 
} 

 
이러한 기본 사항이 준비되었습니다. 여기서는 Newtonsoft.Json을 사용합니다. 작업 정의 

코드 복사

코드는 다음과 같습니다. public JsonResult GetUserInfo() {

return Json(Newtonsoft.Json.JsonConvert.SerializeObject(InitUserInfo()), JsonRequestBehavior.AllowGet);

} 

컬렉션을 json으로 직렬화하고 Get 요청을 활성화합니다. ajax가 Get 메소드를 전달할 수 있도록 

을 호출하여 json2template.js에 대한 참조를 추가한 후 ajax 요청을 시작하여 배경 json 데이터를 얻은 다음, BindTemplate을 사용하여 얻은 데이터를 표시할지 결정합니다. HTML 템플릿

먼저 간단한 HTML 템플릿을 정의합니다.

코드 복사

코드는 다음과 같습니다. < div id="template-userinfo" style="display: none"> ;번째>번호이름나이번째>주소

🎜>

{ 참고: {{item}}을 클래스로 정의하는 것은 forearch와 유사하게 항목 개체의 하위 집합을 탐색하는 것을 의미합니다. }

그런 다음 이 템플릿을 출력할 html 컨테이너를 정의합니다

코드 복사

코드는 다음과 같습니다.

마지막으로 json 데이터를 요청하고 미리 상상한 대로 템플릿을 정의하도록 도와주세요

코드 복사 코드 다음과 같습니다:

저자별 최신 기사