[javascript] JQuery에 권장되는 JavaScript HTML 템플릿 라이브러리? [닫은]

Program / 글쓴이

어떤 HTML 템플릿 라이브러리가 JQuery와 잘 어울리는 지에 대한 제안이 있습니까? 인터넷 검색에는 많은 라이브러리가 있지만 시간의 테스트를 견딜 수있는 잘 알려진 라이브러리가 있는지 확실하지 않습니다.

답변

솔직히 말해서 클라이언트 측 템플릿은 요즘 매우 뜨겁지 만 꽤 정글입니다.

가장 인기있는 것은 다음과 같습니다.

  • pure : 자신의 “구문”이 아닌 js 만 사용합니다.
  • 콧수염 : 꽤 안정적이고 좋네요.
  • jqote2 : 에 따라 매우 빠름
  • jquery 템플릿 (사용되지 않음) :

거기에 많은 프로젝트 스타일은 가장 다른,하지만 당신은 그들이 당신을 맞는 것을보고 테스트해야합니다.

개인적으로 새로운 구문과 논리 집합을 추가하는 데 어려움이 있습니다 ( 논리와 템플릿 혼합,여보세요 ?? ) 겪고 순수 js가되었습니다. 내 모든 템플릿은 자체 html 파일 (./usersTable.row.html)에 저장됩니다. 콘텐츠를 ajaxing 할 때만 템플릿을 사용하고 “논리”js 파일이 거의 없습니다. 하나는 테이블 용, 하나는 div 용, 하나는 목록 용입니다. 그리고 select의 옵션에도 하나도 없습니다 (다른 방법을 사용하는 곳).

더 복잡한 작업을 시도 할 때마다 코드가 덜 명확하고 “오래된”방식으로 수행하는 것보다 안정화하는 데 더 많은 시간이 소요된다는 사실을 알게되었습니다. 템플릿의 논리는 제 생각에는 전혀 말도 안되며 자체 구문을 추가하면 추적하기 매우 어려운 버그만 추가됩니다.

답변

jTemplates

JavaScript 용 템플릿 엔진입니다.

jQuery 플러그인 …

풍모:

  • 자바 스크립트에서 100 %
  • 프리 컴파일 레이터
  • JSON 지원
  • Ajax 작업
  • 템플릿 내에서 JavaScript 코드 사용 허용
  • 계단식 템플릿 작성 허용
  • 템플릿에서 매개 변수 정의 허용
  • 라이브 리프레시! -서버에서 콘텐츠 자동 업데이트 …

답변

이 주제에 대한 합리적인 토론 문서가 여기 하는 주형 도구의 범위를 커버. 그러나 jQuery에만 국한되지 않습니다.

답변

Microsoft에서 만든 jQuery 템플릿 플러그인 은 공식 jQuery 플러그인으로 허용됩니다.

그러나 이제 더 이상 사용되지 않습니다.

답변

json2html 을 확인하고 , HTML 스 니펫을 작성하지 않고 대신 JSON 변환에 의존하여 JSON 객체 배열을 구조화되지 않은 목록으로 변환합니다. 매우 빠르고 DOM 생성을 사용합니다.

답변

몇 년 전에 IBDOM을 구축했습니다. http://ibdom.sf.net/ | 2009 년 12 월부터 트렁크에서 직접 가져 오면 jQuery 바인딩을 지원합니다.

$("#foo").injectWith(collectionOfJavaScriptObjects);

또는

$("#foo").injectWith(simpleJavaScriptObject);

또한 이제 모든 “data : propName”마커를 class = “data : propName other classnames”속성에 넣을 수 있으므로 해당 마커로 응용 프로그램의 콘텐츠를 흩뿌 릴 필요가 없습니다.

최근에 개선 된 사항을 반영하기 위해 아직 문서를 많이 업데이트하지 않았지만 2007 년부터이 프레임 워크의 다양한 버전을 생산해 왔습니다.

이 질문에 회의론자에게 :

Microsoft가 IE5를 사용하여 지금 우리가 XmlHttpRequest 및 “ajax”패턴으로 알고있는 것을 발명했을 때, 그 뒤에있는 약속의 일부는 웹 브라우저와 서버간에 순수한 데이터 교환이었습니다. 이 데이터는 XML로 캡슐화되어야했습니다. 1999/2000 년에는 XML이 매우 뜨거웠 기 때문입니다. 콜백 메커니즘을 사용하여 네트워크를 통해 xml 문서를 검색하는 것 외에도 MS의 MSXML ActiveX 구성 요소는 현재 우리가 알고있는 XSL-T 및 XPath의 초안 구현을 지원했습니다.

HTTP / XML, XPath 및 XSL-T 검색을 결합하여 개발자는 “애플리케이션”으로 동작하고 순전히 전송하며 더 중요한 것은 서버에서 데이터를 검색하는 풍부한 “문서”를 구축 할 수있는 엄청난 창의성을 제공했습니다.

이것이 유용한 패턴 인 이유는 무엇입니까? 사용자 인터페이스가 얼마나 복잡하고 유지 관리에 얼마나 신경을 쓰는지에 따라 다릅니다.

고급 CSS를 사용하여 시각적으로 매우 풍부한 의미 론적으로 마크 업 된 인터페이스를 구축 할 때 마지막으로하고 싶은 것은 마크 업 조각을 “미니 컨트롤러 / 뷰”로 청크 아웃하는 것이므로 문서 조각을 메인으로 .innerHTML 할 수 있습니다. 문서, 그리고 여기에 그 이유가 있습니다.

고급 html / css 사용자 인터페이스를 관리 가능한 상태로 유지하기위한 핵심 원칙 중 하나는 최소한 활성 개발 단계 동안 유효성 검사를 유지하는 것입니다. 마크 업의 유효성이 확인되면 CSS 버그에 집중할 수 있습니다. 이제 사용자 상호 작용의 다양한 단계에서 마크 업 조각이 삽입되면 관리하기가 매우 어려워지고 모든 것이 부서지기 쉽습니다.

아이디어는 모든 마크 업 UI 구성을 단일 문서에 포함 하고, 네트워크를 통해 데이터 만 검색 하고, 최소한 마크 업 구성에 데이터를 주입하고 최대 복제 마크 업 구성에 데이터를 주입하는 견고한 프레임 워크를 사용하는 것이 었 습니다. 반복 가능으로 표시했습니다.

이것은 IE5 +의 XSL-T 및 XPath에서 가능했지만 사실상 다른 브라우저에서는 불가능했습니다. 일부 F / OSS 브라우저 프레임 워크는 XPath를 사용했지만 아직 우리가 신뢰할 수있는 것은 아닙니다.

그렇다면 그러한 패턴을 달성하기위한 차선책은 무엇일까요? IBDOM. 서버에서 데이터를 가져 와서 문서에 삽입하십시오. 쉽게.

답변

Javascript-Templates를 살펴보아야합니다. 이것은 유명한 jQuery 파일 업로드 플러그인 내에서 사용되며 동일한 저자 인 Sebastian Tschan (@blueimp)이 개발 한 작은 템플릿 엔진입니다.

https://github.com/blueimp/JavaScript-Templates

Sebastian이 만든 사용 가이드 를 따르고이 줄을 제거하십시오.

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

이것으로 교체

$('#result').html(tmpl('tmpl-demo', data));

HTML 파일에도 div 결과 태그를 추가하는 것을 잊지 마십시오.

<div id="result"></div>

즐겨