jQuery 템플릿 엔진
나는 클라이언트 측을 사용할 템플릿 엔진을 찾고 있습니다.저는 jsRepeater와 jQueryTemplates와 같은 몇 가지를 시도해 왔습니다.FireFox에서는 잘 작동하는 것처럼 보이지만 HTML 테이블 렌더링과 관련하여 IE7에서는 모두 실패한 것처럼 보입니다.
MicrosoftAjaxTemplates.js(http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766) 에서)도 살펴보았지만 동일한 문제가 있는 것으로 나타났습니다.
사용할 다른 템플릿 엔진에 대한 조언이 있습니까?
릭 스트랄의 jQuery를 통한 클라이언트 템플릿 게시물을 확인하십시오.그는 jTemplates에 대해 알아보고, John Resig의 마이크로템플릿 솔루션에 대해 더 나은 사례를 제시합니다.좋은 비교, 많은 샘플.
방금 이것에 대해 조사를 했는데 jquery-tmpl을 사용할 것입니다. 왜죠?
- 존 레지그가 썼습니다.
- 핵심 jQuery 팀에서 "공식" 플러그인으로 유지할 것입니다.편집: jQuery 팀에서 이 플러그인을 더 이상 사용하지 않습니다.
- 단순성과 기능성 사이에서 완벽한 균형을 이룹니다.
- 그것은 매우 깨끗하고 잘 고안된 구문을 가지고 있습니다.
- 기본적으로 HTML 인코딩입니다.
- 확장성이 뛰어납니다.
더 많은 정보: http://forum.jquery.com/topic/templating-syntax
jQoote: http://aefxx.com/jquery-plugins/jqote/
누군가가 Resig의 마이크로 템플릿 솔루션을 가져와 jQuery 플러그인으로 패키지화했습니다.
레시그가 자신의 것을 출시할 때까지 (그가 자신의 것을 출시한다면) 이것을 사용할 것입니다.
조언 고마워, 이비
jQuery 나노:
템플릿 엔진
기본 사용법
다음과 같은 JSON 응답이 있다고 가정합니다.
data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12-31" } } }다음을 수행할 수 있습니다.
nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)준비된 끈을 준비합니다.
<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>테스트 페이지...
jQuery-tmpl은 jQuery 1.5에서 시작하는 jQuery 코어에 포함됩니다.
공식 문서는 다음과 같습니다.
http://api.jquery.com/category/plugins/templates/
편집: jQuery 1.5에서 제외되었으며, 앞으로 출시될 jQuery UI Grid에 종속될 예정이므로 jQuery UI 팀에서 조정할 예정입니다.
http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/
특정 문제를 어떻게 처리하는지는 잘 모르겠지만 PURE 템플릿 엔진도 있습니다.
"최고"를 정의하는 방법에 따라 다릅니다. 이 주제에 대한 제 게시물을 참조하십시오.
가장 빠른 것을 찾는다면, 여기 좋은 벤치마크가 있습니다. DoT가 이기고 다른 모든 사람들을 뒤로 하는 것 같습니다.
만약 당신이 가장 공식적인 JQuery 플러그인을 찾고 있다면, 여기 제가 발견한 것이 있습니다.
파트 I: JQuery 템플릿
베타, 임시로 공식적인 JQuery 템플릿 플러그인은 이 http://api.jquery.com/category/plugins/templates/ 였습니다.
하지만 얼마 전에 베타 버전으로 유지하기로 결정된 것 같습니다.
참고: jQuery 팀은 이 플러그인을 베타 버전 이후로는 사용하지 않기로 결정했습니다.그것은 더 이상 활발하게 개발되거나 유지되고 있지 않습니다.문서는 적절한 교체 템플릿 플러그인이 준비될 때까지 당분간(참고용으로) 여기에 남아 있습니다.
파트 II:다음 단계
새로운 로드맵은 새로운 플러그인 세트, JSRender(DOM 및 JQuery 템플릿 렌더링 엔진과 무관) 및 JSViews를 목표로 하고 있으며, 이들은 데이터 바인딩과 관찰/관찰 가능한 패턴 구현을 제공합니다.
여기 이 주제에 대한 블로그 게시물이 있습니다.
http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html
그리고 여기 최신 정보원이 있습니다.
- JSViews https://github.com/BorisMoore/jsviews
- JSRender https://github.com/BorisMoore/jsrender
기타 자원
http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates 주제에 대한 멋진 발표.
작업 데모: http://borismoore.github.com/jsviews/demos/index.html
참고로 아직 베타 버전은 아니며 로드맵 항목에 불과하지만 템플릿 및 UI 바인딩을 위한 공식 JQuery/JQuery UI 확장이 될 수 있는 좋은 후보로 보입니다.
바보가 되기 위해서만 ^^
// LighTest TPL
$.tpl = function(tpl, val) {
for (var p in val)
tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
tplHtml = '<div>N°{id} - {title}</div>',
newHtml = '';
$.each(dataObj, function(i, val) {
newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');
http://jsfiddle.net/molokoloco/w8xSx/ ;)
이것은 jsquery에 특정되지 않지만, 다음은 구글이 오픈 소스로 공개한 JS 기반 템플릿 라이브러리입니다.
http://code.google.com/p/google-jstemplate/
이렇게 하면 DOM 요소를 템플릿으로 사용할 수 있으며, 템플릿 렌더링의 출력이 여전히 다른 데이터 모델로 다시 렌더링할 수 있는 템플릿이라는 점에서 재입력됩니다.
다른 사람들은 jquery-tmpl을 지적했고, 저는 그 답변을 지지했습니다.하지만 꼭 깃허브 포크를 보세요.
중요한 수정 사항과 흥미로운 기능도 있습니다.http://github.com/jquery/jquery-tmpl/network
존 레시그가 블로그에 올린 글이 있습니다.http://ejohn.org/blog/javascript-micro-templating/
만약 당신이 에서 일하고 있다면.NET Framework 2.0/3.5에서는 http://JsonFx.net 에서 구현한 JBST를 살펴봐야 합니다.친숙한 JSP/ASP 구문을 사용하지만 런타임에 구문 분석할 필요가 없는 소형 캐시 가능 템플릿을 위해 빌드 시 미리 컴파일되는 클라이언트 측 템플릿 솔루션이 있습니다.템플릿 자체가 순수 JavaScript로 컴파일되므로 jQuery 및 기타 JavaScript 라이브러리와 잘 작동합니다.
저는 jtemplates jquery pluging을 사용하고 있었는데 성능이 너무 안 좋았어요.성능이 훨씬 좋은 트림패스(http://code.google.com/p/trimpath/wiki/JavaScriptTemplates) 로 변경하였습니다.IE7이나 FF에 문제가 있는 것을 발견하지 못했습니다.
매우 가벼운 작업의 경우 jquery-tmpl이 적절하지만 경우에 따라 데이터가 자체 포맷 방법을 알고 있어야 합니다(나쁜 점!).
더 완전한 기능을 갖춘 템플릿 플러그인을 찾고 있다면 오렌지-J를 추천합니다.그것은 프리마커에 의해 영감을 받았습니다.템플릿 내 템플릿을 포함한 인라인 Javascript, 객체 및 어레이에 대한 루프를 지원하며 출력을 위한 우수한 형식 지정 옵션(maxlen, wordboundary, htmlentity 등)을 가지고 있습니다.
아, 그리고 쉬운 구문.
템플릿을 디자인하는 방법에 대해 생각해 보는 것이 좋습니다.
나열된 많은 템플릿 솔루션(jQote, jquery-tmpl, jTemplates)의 한 가지 문제는 HTML에 비HTML을 삽입해야 한다는 것입니다. HTML 도구 내에서 작업하거나 HTML 디자이너와 함께 개발 프로세스에서 작업하는 데 어려움이 있을 수 있습니다.저는 개인적으로 그 접근법의 느낌을 좋아하지 않습니다. 장점과 단점이 있지만요.
일반 HTML을 사용하지만 요소 특성, CSS 클래스 또는 외부 매핑을 사용하여 데이터 바인딩을 나타낼 수 있는 템플릿 접근 방식의 다른 클래스가 있습니다.
녹아웃은 이 접근법의 좋은 예이지만, 저는 그것을 직접 사용하지 않았기 때문에 다른 사람들이 그것을 좋아하는지 아닌지를 결정하기 위해 투표에 맡기고 있습니다.적어도 좀 더 가지고 놀 시간이 있을 때까지는.
다른 답변으로 나열된 PURE는 이 접근 방식의 또 다른 예입니다.
참고로 chain.js도 볼 수 있지만, 원래 출시된 이후로 많이 업데이트되지 않은 것 같습니다.자세한 배경은 http://javascriptly.com/2008/08/a-better-javascript-template-engine/ 을 참조하십시오.
웹사이트에 있는 John Resig의 템플릿 엔진을 사용하는 드롭박스.그들은 그것을 조금 수정했습니다. 당신은 이 드롭박스의 js 파일에서 확인할 수 있습니다.이 파일에서 tmpl을 검색하면 템플릿 엔진을 코드화합니다.
감사합니다. 누군가에게 도움이 되길 바랍니다.
저는 현재 다중 HTML 템플릿 프레임워크를 사용하고 있습니다.이 프레임워크를 사용하면 DOM에서 템플릿 데이터를 훨씬 쉽게 가져올 수 있습니다.또한 훌륭한 MVC 모델링.
http://www.enfusion-framework.org/ (샘플을 보세요!)
비볼레의 PURE 재작성도 있습니다 - jquery pure html 템플릿 - https://github.com/mpapis/jquery-pure-templates
그것은 주로 jquery selector를 사용하여 훨씬 더 많은 자동 렌더링을 허용해야 하며, 멋진 것들을 HTML에 넣을 필요가 없는 더 중요한 것은 무엇입니까?
언급URL : https://stackoverflow.com/questions/170168/jquery-templating-engines
'programing' 카테고리의 다른 글
| MySQL 워크벤치 대 phpMyAdmin (0) | 2023.07.31 |
|---|---|
| Node.js 인증마다 사용할 환경별 구성 설정 (0) | 2023.07.31 |
| 사용자 지정 이니셜라이저가 있는 Swift 열거형은 rawValue 이니셜라이저를 잃게 됩니다. (0) | 2023.07.31 |
| Oracle Forms 6i에서 웹으로 마이그레이션하는 데 가장 적합한 솔루션은 무엇입니까? (0) | 2023.07.31 |
| 탐색 컨트롤러 내부의 탭 모음 컨트롤러 또는 탐색 루트 보기 공유 (0) | 2023.07.31 |