JSON으로 개체 배열을 반환하는 웹 서비스를 호출하고 있습니다. 이러한 개체를 가져 와서 div를 HTML로 채우고 싶습니다. 각 개체에 URL과 이름이 포함되어 있다고 가정 해 보겠습니다.
각 개체에 대해 다음 HTML을 생성하려는 경우 :
<div><img src="the url" />the name</div>이에 대한 모범 사례가 있습니까? 몇 가지 방법을 볼 수 있습니다.
- 문자열 연결
- 요소 만들기
- 템플릿 플러그인 사용
- 서버에서 html을 생성 한 다음 JSON을 통해 제공합니다.
답변
옵션 # 1과 # 2는 가장 즉각적인 옵션이 될 것이지만 두 옵션 모두 문자열을 작성하거나 DOM 객체를 생성함으로써 성능 및 유지 관리에 미치는 영향을 느낄 것입니다.
템플릿 작성이 그다지 미숙 한 것은 아니며 대부분의 주요 Javascript 프레임 워크에서 팝업이 표시됩니다.
다음 은 성능 저하를 줄일 수있는 JQuery Template Plugin 의 예입니다 . 정말 간단합니다.
var t = $.template('<div><img src="${url}" />${name}</div>');
$(selector).append( t , {
url: jsonObj.url,
name: jsonObj.name
});
나는 멋진 길을 가고 (그리고 더 나은 성능, 더 유지 보수하기 쉬운) 템플릿을 사용한다고 말한다.
답변
절대적으로 문자열을 연결해야하는 경우 일반 대신 :
var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }임시 배열 사용 :
var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");특히 IE에서는 배열을 사용하는 것이 훨씬 빠릅니다. 얼마 전에 IE7, Opera 및 FF로 문자열을 테스트했습니다. Opera는 테스트를 수행하는 데 0.4 초 밖에 걸리지 않았지만 IE7은 20 분 후에 끝나지 않았습니다 !!!! (아니, 농담이 아닙니다.) 어레이 IE는 매우 빠릅니다.
답변
처음 두 가지 옵션 중 하나가 일반적이며 허용됩니다.
Prototype 에서 각각의 예제를 제공하겠습니다 .
// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }접근법 # 1 :
var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom접근법 # 2 :
var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom답변
아마도 더 현대적인 접근 방식은 javascript를 포함한 여러 언어로 구현 된 Mustache 와 같은 템플릿 언어를 사용하는 것 입니다. 예를 들면 :
var view = {
url: "/hello",
name: function () {
return 'Jo' + 'hn';
}
};
var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);추가 이점도 얻을 수 있습니다. 서버 측과 같은 다른 위치에서 동일한 템플릿을 재사용 할 수 있습니다.
더 복잡한 템플릿 (if 문, 루프 등)이 필요한 경우 더 많은 기능이 있고 Mustache와 호환되는 핸들 바를 사용할 수 있습니다 .
답변
다음 은 jQuery 용 Simple Templates 플러그인을 사용하는 예입니다 .
var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
classname : 'my-class',
content : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);답변
숨겨진 div의 페이지에 템플릿 HTML을 추가 한 다음 cloneNode 및 즐겨 찾는 라이브러리의 쿼리 기능을 사용하여 채울 수 있습니다.
/* CSS */
.template {display:none;}
<!--HTML-->
<div class="template">
<div class="container">
<h1></h1>
<img src="" alt="" />
</div>
</div>
/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})답변
공개 : 나는 BOB의 관리자입니다.
이 과정을 훨씬 쉽게 만들어주는 자바 스크립트 라이브러리 인 BOB가 있습니다. 있습니다.
구체적인 예 :
<div><img src="the url" />the name</div>이것은 다음 코드에 의해 BOB로 생성 될 수 있습니다.
new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"또는 더 짧은 구문으로
new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"이 라이브러리는 매우 강력하며 데이터 삽입 (d3와 유사)을 통해 매우 복잡한 구조를 만드는 데 사용할 수 있습니다. 예 :
data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"BOB는 현재 DOM에 데이터 삽입을 지원하지 않습니다. 이것은 todolist에 있습니다. 지금은 출력을 일반 JS 또는 jQuery와 함께 사용하여 원하는 곳에 둘 수 있습니다.
document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());jquery 및 d3와 같은 대안에 만족하지 않았기 때문에이 라이브러리를 만들었습니다. 코드는 매우 복잡하고 읽기 어렵습니다. BOB로 작업하는 것은 제 생각에 편향되어 있으며 훨씬 더 즐겁습니다.
BOB는 Bower 에서 사용할 수 있으므로를 실행하여 얻을 수 있습니다 bower install BOB.