내 함수에서 HTML을 제거하는 것은 JSON에서 작동하는

Question

이며, 결과를 객체로 성공적으로 가져 왔습니다. 많은 투쟁 끝에 나는 그것을 작동시킬 수 있었다. 그러나 솔루션을 '정리'하는 데 많은 도움을 주시면 감사하겠습니다. 최상의 방법으로 항상 HTML과 jQuery를 별도로 유지해야한다는 내용을 읽었습니다. 자주 이런 종류의 일을 할 경우

http://jsfiddle.net/xunZU/

var results = $.map(data.GSP.RES.R, function (result) { 
    return { 
     title: result.T, 
     snippet: result.S, 
     url: result.U 
    }; 

}); //var results 

$.each(results, function (index, obj) { 
    $('#results_holder').append('<h2><a href="' + obj.url + '">' + obj.title + '</a></h2>' + '<p>' + obj.snippet + '</p>'); 
}); //each 

Answer 1

HTML에서의 JS 분리, HTML에서의 CSS 등. 함수, 스타일 및 형식 등을 분리하는 연습에 그대로 적용되기 때문에 좋은 생각입니다.

반면에 자바 스크립트를 사용하여 몇 가지 요소를 작성하고 정리하는 것은 잘못된 것은 아닙니다. 내가 할 것 : 또한 객체와 함께 작동

var results = $.map(data.GSP.RES.R, function (result) { 
    return { 
     title : result.T, 
     snippet: result.S, 
     url : result.U 
    }; 
}); 

$.each(results, function (index, obj) { 
    var h2 = $('<h2 />'), 
     a = $('<a />', {text: obj.title, href: obj.url}), 
     p = $('<p />', {text: obj.snippet}); 

    $('#results_holder').append(h2.append(a), p); 
}); 

$.each 같이 $.map 진정 필수적인 is'nt, 당신도 할 수 :

$.each(data.GSP.RES.R, function (index, obj) { 
    var h2 = $('<h2 />'), 
     a = $('<a />', {text: obj.T, href: obj.U}), 
     p = $('<p />', {text: obj.S}); 

    $('#results_holder').append(h2.append(a), p); 
}); 

Answer 2

, 나는 매우 될 수있는 템플릿 라이브러리의 사용을 발견했습니다

코드의 조각은 아래 링크에서 확인하실 수 있습니다 도움이됩니다. 개인적으로 handlebars.js를 사용하십시오. 자바 스크립트에서 별도의 마크 업을 작성하는 것이 매우 간단합니다.

http://handlebarsjs.com/

Answer 3

물론, 당신은 다음과 같이 자신의 의사 템플릿 엔진을 롤백 할 수 있습니다 : http://jsfiddle.net/joeframbach/xunZU/1/

을 숨겨진 템플릿 추가하여 :

<div id="templates" style="display:none;"> 
<h2><a></a></h2><p></p> 
</div> 

<div id="results_holder"></div> 

을 그리고 복제 :

var data = [ 
    {T: 'foo1', S: 'bar1', U: 'bat1'}, 
    {T: 'foo2', S: 'bar2', U: 'bat2'}, 
    {T: 'foo3', S: 'bar3', U: 'bat3'}, 
    {T: 'foo4', S: 'bar4', U: 'bat4'}, 
    {T: 'foo5', S: 'bar5', U: 'bat5'}, 
] 
var results = $.map(data, function (result) { 
    return { 
     title: result.T, 
     snippet: result.S, 
     url: result.U 
    }; 

}); //var results 

$.each(results, function (index, obj) { 
    var tpl_h2 = $('#templates h2').clone(); 
    var tpl_p = $('#templates p').clone(); 
    tpl_h2.find('a').attr('href',obj.url).html(obj.title); 
    tpl_p.html(obj.snippet); 
    $('#results_holder').append(tpl_h2).append(tpl_p); 
}); //each 

을

Answer 4

그래서 당신을위한 '깨끗한'솔루션을 찾고 DOM 조작. 클린이란 상대적인 용어입니다. 나는 당신이 유지할 수있는 무언가를 원한다고 생각할 것입니다. HTML과 자바의 저글링은 동기화되지 않으면 번거로울 수 있습니다. 나는 하나의 대답이 정확하다고는 생각하지 않지만, 당신이나 당신 팀에 필요한 것을 찾을 수 있습니다.

joeframbach가 제안한 것과 마찬가지로 .clone()을 제안하려고했지만 요소를 개별적으로 복사하는 대신 DOM 요소 전체와 일부 하위 클래스를 대신 사용합니다. 그런 다음 기본 요소 또는 구조에 대한 지식이 필요하지 않습니다. http://jsfiddle.net/krets/sESy2/2/

$.each(results, function (index, obj) { 
    var tpl = $('#templates').clone(); 
    tpl.attr('id','unique'+index) 
    tpl.find('.linkOne').attr('href',obj.url).html(obj.title); 
    tpl.find('.one').html('unique'+index); 
    tpl.find('.two').html(obj.snippet); 
    tpl.removeClass('hidden') 
    $('#results_holder').append(tpl); 
}); //each