Json2Template.js jquery 기반 플러그인은 JavaScript 개체를 Html template_jquery에 바인딩합니다.
- WBOY원래의
- 2016-05-16 18:00:171351검색
코드 복사 코드는 다음과 같습니다.
$("#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을 사용합니다. 작업 정의
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 템플릿
컬렉션을 json으로 직렬화하고 Get 요청을 활성화합니다. ajax가 Get 메소드를 전달할 수 있도록
을 호출하여 json2template.js에 대한 참조를 추가한 후 ajax 요청을 시작하여 배경 json 데이터를 얻은 다음, BindTemplate을 사용하여 얻은 데이터를 표시할지 결정합니다. HTML 템플릿
먼저 간단한 HTML 템플릿을 정의합니다.
코드 복사
코드는 다음과 같습니다. < div id="template-userinfo" style="display: none"> ;번째>번호이름나이번째>주소
🎜>
{ 참고: {{item}}을 클래스로 정의하는 것은 forearch와 유사하게 항목 개체의 하위 집합을 탐색하는 것을 의미합니다. }
그런 다음 이 템플릿을 출력할 html 컨테이너를 정의합니다
코드 복사
코드는 다음과 같습니다.
| {{ID}} | {{이름}} | {{ 연령}} | {{주소}} |
{ 참고: {{item}}을 클래스로 정의하는 것은 forearch와 유사하게 항목 개체의 하위 집합을 탐색하는 것을 의미합니다. }
그런 다음 이 템플릿을 출력할 html 컨테이너를 정의합니다
코드 복사
코드는 다음과 같습니다.