jQuery 템플릿 엔진

jQuery 템플릿 엔진

---

클라이언트 쪽을 사용할 템플릿 엔진을 찾고 있습니다. 나는 jsRepeater 및 jQuery Templates와 같은 몇 가지를 시도 해왔다. FireFox에서는 정상적으로 작동하는 것처럼 보이지만 HTML 테이블 렌더링과 관련하여 IE7에서는 모두 고장난 것처럼 보입니다.

또한 MicrosoftAjaxTemplates.js ( http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 )를 살펴 보았지만 동일한 문제가 있음이 밝혀졌습니다.

다른 템플릿 엔진에 대한 조언이 있습니까?

---

jQuery로 Rick Strahl의 포스트 클라이언트 템플릿을 확인하십시오 . 그는 jTemplates를 탐구하지만 John Resig의 마이크로 템플릿 솔루션에 대한 더 나은 사례를 제시 하고 일부를 개선합니다. 좋은 비교, 많은 샘플.

---

이것에 대해 약간의 연구를했고 jquery-tmpl을 사용할 것 입니다. 왜?

1. John Resig가 작성했습니다.
2. 핵심 jQuery 팀은 "공식"플러그인으로 유지 관리합니다. 편집 : jQuery 팀은이 플러그인을 더 이상 사용하지 않습니다.
3. 단순성과 기능 사이의 완벽한 균형을 유지합니다.
4. 그것은 매우 깨끗하고 잘 생각 된 구문을 가지고 있습니다.
5. 기본적으로 HTML로 인코딩됩니다.
6. 확장 성이 뛰어납니다.

더 여기 : http://forum.jquery.com/topic/templating-syntax

---

jQote : http://aefxx.com/jquery-plugins/jqote/

누군가 Resig의 마이크로 템플릿 솔루션을 가져 와서 jQuery 플러그인으로 패키지했습니다.

나는 Resig가 자신을 공개 할 때까지 이것을 사용할 것입니다.

팁 주셔서 감사합니다, ewbi.

---

jQuery Nano :

템플릿 엔진

기본 사용법

다음 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://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

공식 문서는 다음과 같습니다.

http://api.jquery.com/category/plugins/templates/

---

편집 : 그것은 jQuery 1.5에서 제외되었으며 이제 jQuery UI 팀에 의해 조정될 것입니다. 곧 jQuery UI 그리드의 종속성이 될 것입니다.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

---

특정 문제를 어떻게 처리하는지 확실하지 않지만 PURE 템플릿 엔진도 있습니다.

---

그것은 당신이 "최고"를 정의하는 방법에 따라 달라, 내 게시물을 참조하십시오 여기에 주제에

가장 빠른 것을 찾으면 여기에 좋은 벤치 마크 가 있습니다 .DoT가 승리하고 다른 모든 사람들을 뒤에 남겨 둡니다.

가장 공식적인 JQuery 플러그인을 찾고 있다면 여기에 내가 찾은 것이 있습니다.

1 부 : JQuery 템플릿

베타 공식 JQuery 템플릿 플러그인은 http://api.jquery.com/category/plugins/templates/입니다.

그러나 얼마 전까지 만해도 베타 버전으로 유지하기로 결정했습니다 ...

참고 : jQuery 팀은이 플러그인을 베타 버전으로 사용하지 않기로 결정했습니다. 더 이상 적극적으로 개발 또는 유지 관리되지 않습니다. 적절한 대체 템플릿 플러그인이 준비 될 때까지 문서는 참고 용으로 여기에 남아 있습니다.

파트 II : 다음 단계

The new roadmap seem to aim for a new set of plugins, JSRender (independent of DOM and even JQuery template rendering engine) and JSViews which have some nice data binding and observer / observable pattern implementation

Here is the blog post on the topic

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

And here is the latest source

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Other resources

• A nice presentation on the topic http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Working demos: http://borismoore.github.com/jsviews/demos/index.html

Note it's still not even in beta, and only a road map item, but seems like a good candidate to become an official JQuery/JQueryUI extension for templates and UI binding

---

http://garann.github.com/template-chooser/ this link is really helpful for selecting a Javascript Base Template.

---

Only to be the foolish ^^

// 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/ ;)

---

This isn't jsquery specific, but here's a JS-based templating library released by google as open source:

http://code.google.com/p/google-jstemplate/

This allows using DOM elements as templates, and is re-entrant (in that the output of a template rendering is still a template that can be re-rendered with a different data model).

---

Others have pointed jquery-tmpl, and I have upvoted those answer. But be sure to have a look at github forks.

There are important fixes out there and interesting features too. http://github.com/jquery/jquery-tmpl/network

---

John Resig has one that's he's posted on his blog. http://ejohn.org/blog/javascript-micro-templating/

---

If you're working in the .NET Framework 2.0/3.5, you should take a look at JBST as implemented by http://JsonFx.net. It has a client-side templating solution that has familiar JSP/ASP syntax but is precompiled at build-time for compact cache-able templates that don't need to be parsed at runtime. It works well with jQuery and other JavaScript libraries as the templates themselves are compiled to pure JavaScript.

---

I was using jtemplates jquery pluging but the performance was really bad. I switched to trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates) which has much better performance. I haven't noticed any issues with IE7 or FF.

---

For very light work jquery-tmpl is adequate, but it requires in some cases that the data know how to format itself (bad thing!).

If you're looking for a more full featured templating plugin I'd suggest Orange-J. It was inspired by Freemarker. It supports if, else, loops over objects & arrays, inline javascript, including templates within templates and has excellent formatting options for output (maxlen, wordboundary, htmlentities, etc).

Oh, and easy syntax.

---

You may want to think a bit how you want to design your templates.

One issue with many of the listed template solutions (jQote, jquery-tmpl, jTemplates) is they require you to insert non-HTML in your HTML, which can be a pain to work with in HTML tools or in a development process with HTML designers. I personally don't like the feel of that approach, though it has its pros and cons.

There is another class of template approaches that use normal HTML, but allow you to indicate data bindings with element attributes, CSS classes, or external mappings.

Knockout is a good example of this approach, but I have not used it myself so I am leaving it to the votes to decide if others like it or not. At least until I have time to play with it more.

PURE listed as another answer is another example of this approach.

For reference you can also look at chain.js, but it doesn't seem to have been updated much since its original release. For more background on it see http://javascriptly.com/2008/08/a-better-javascript-template-engine/.

---

Dropbox using John Resig's template engine on website. They have little bit modified it you can check in this js file of dropbox. Search in this file for tmpl and you will code of template engine.

Thanks. Hope it will be useful for someone.

---

I'm currently using a multi HTML templating framework. This framework makes it a lot easier to import templated data in your DOM. Also great MVC modeling.

http://www.enfusion-framework.org/ (look at the samples!)

---

There is also an rewrite of PURE by beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

It should allow a lot more automatic rendering mostly using jquery selectors, whats more important it does not require to put fancy things into HTML.

참고URL : https://stackoverflow.com/questions/170168/jquery-templating-engines