jQuery에서 페이지에 "복잡한"요소를 삽입하는 가장 좋은 방법은 무엇입니까?

아약스를 사용하여 서버의 일부 데이터를 가져 오는 버튼이 있습니다. 완료되면 DOM에 요소를 추가해야합니다. 추가jQuery에서 페이지에 "복잡한"요소를 삽입하는 가장 좋은 방법은 무엇입니까?

요소는 같은 것이

데이터를 넣어, (이름, 제조업체에이 구조를 만들 수있는 가장 좋은 방법이 무엇인지 서버에서 데이터를 다시 얻을 내 jQuery를 기능에

<div class="SomeClass"> 
    <div class="SomeOtherClass"> 
    <span class="Name">name from server</span> 
    <span class="Manufacturer">manufacturer from server</span> 
    </div> 
    <span class="Weight">weight from server</span> 
</div>'

무게)를 올바른 위치에 서버에서 가져 와서 DOM에 넣으십시오. 나는 이것 같이 일하고있다 :

그러나 이것은 아주 좋아 보이지 않으며, 적당한 구조를 보는 것은 어렵다.

깨끗한 방법으로이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

출처

2011-06-15 Øyvind Bråthen

사용 http://aefxx.com/jquery-plugins/jqote/ 플러그인. jquery 템플릿 플러그인보다 빠릅니다. 클라이언트 사이드 템플리트를 쉽게 만듭니다. –

은 내가 내 HTML 본문 하단에

<div class="SomeClass" id='SomeClassTemplate' style='display:none'> 
    <div class="SomeOtherClass"> 
     <span class="Name">name from server</span> 
     <span class="Manufacturer">manufacturer from server</span> 
    </div> 
    <span class="Weight">weight from server</span> 
</div>

같은 것을 추가로 갈 것 구조의 여러 "버전"필요한 경우, 다음 내 이벤트 핸들러 내부 어디 요소이다 제가

var newDiv = $("#SomeClassTemplate").clone(); 
newDiv.attr("id","whatever") 
// remember this id should be different for each instance. or you can remove it 
.appendTo("whatever") // depends on where in DOM you want to insert it 
.find(".name").html("My name"); 

newDiv.find('.manufacturer').html("my manufacturer); 
newDiv.show();

제가이 방법을 발견하는 장점을 할 것이 추가되어야하는 코드는 용이 경우 구조 변경 선택기를 조정함으로써 변경 될 수 있다는 것이다.

출처

2011-06-15 10:35:10 kyushiro

+1 : 나는 이것의 변형을 사용했다. 삽입 할 요소의 HTML은 매우 깨끗 해지고 쉽게 시각화하고 변경할 수 있습니다. –

내 페이지에서이 DOM을 사용할 것이라는 것을 알고있는 경우에만 템플릿에 이미 통합 할 것이며 콘텐츠를 채 웁니다. 많은 경우, 조건에 따라 내용을 주입 할 것이고,이 방법은 내 필요에 맞지 않을 것입니다. – neoswf

jQuery template plugin을 사용할 수 있습니다. 그러나 이것이 "가장 좋은"방법이라면, 나는 말할 수 없다. 템플릿을 사용하면 처리 시간이 더 많이 걸리지 만 코드는 읽기 쉽습니다. 당신은 당신의 특정한 임무를 위해 무게를 달아야합니다. Recommended JavaScript HTML template library for JQuery?

출처

2011-06-15 08:02:19 DanielB

jQuery Templates을 사용해 볼 수도 있습니다.

아직 베타 버전이지만 널리 사용됩니다.

DanielB이 제안

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; } 
table td { border:1px solid blue; padding:3px; } 
</style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 

<button id="showBtn">Show movies</button><br/> 
<table><tbody id="movieList"></tbody></table> 

<script> 
    var movies = [ 
    { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" }, 
    { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" }, 
    { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" } 
    ]; 

var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>" 

/* Compile markup string as a named template */ 
$.template("movieTemplate", markup); 

/* Render the named template */ 
$("#showBtn").click(function() { 
    $("#movieList").empty(); 
    $.tmpl("movieTemplate", movies).appendTo("#movieList"); 
}); 
</script> 

</body> 
</html>

출처

2011-06-15 08:07:08

당신은 유지하지만 베타 모드에 또 다른 스크립트를 추가하는 방법에 대한 생각 * 당신은 코드가 청소기를보고 할 것이다, 아마 쉽게 jQuery를 템플릿을 사용할 수 있습니다 (예 문서에서입니다) 귀하의 응용 프로그램에. 그만한 가치가 있니?

HTML이 jQuery를 통해 동적이어야하거나 <div>Hello</div>과 같은 코드 조각 인 경우 나는 selector.append()를 사용합니다.

예를 들어 HTML 코드라면 그대로 HTML 페이지에 그대로 두는 것이 좋습니다.

내게는 HTML로 무엇을해야하는지 정말 궁금해합니다.

예를 들어 실제로 유지 관리에 도움이 된 온라인 채팅 응용 프로그램에서 jQuery 템플릿을 사용하고 있습니다.

출처

2011-06-15 08:07:45 eugeneK

가독성을 염두에 두려면 다음 방법은 모두 깨끗하고 내용을 추가하기 위해 불필요한 jQuery 조회를 수행하지 않아야합니다.

var div = '<div class="someClass">' + 
      ' <div class="SomeOtherClass">' + 
      '  <span class="Name">' + value.name + '</span>' + 
      '  <span class="Manufacturer">' + value.manufacturer + '</span>' + 
      ' </div>' + 
      ' <span class="Weight">' + value.weight + '</span>' + 
      '</div>'; 

$('#itemList').append(div);

출처

2011-06-15 09:02:47 amustill

나는 당신의 접근 방식을 더 좋아한다. 비록 코드에서 색상을보기 좋았을 것이다. P – Purefan

내가하고있는 방식이 아래에 나와 있습니다. 너무 많은 div를 만들어야하는지 잘 모르겠지만 나랑 잘 어울려.

var div1 = $('<div class="colwrap_fof"></div>');  //THE COMPLEX DIV ITSELF 
var div2 = $('<div class="homeimg"></div>');     
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>'); 
var div22 = $('<div id="frontImageDiv'+fof_index+'" class="frontDiv"></div>'); 
div2.append(div21); 
div2.append(div22); 
div1.append(div2); 
$("#df_background").append(div1);  // ADDING the complex div to the right place

건배,

출처

2013-01-05 21:03:47 marcelosalloum

jQuery에서 페이지에 "복잡한"요소를 삽입하는 가장 좋은 방법은 무엇입니까?

답변

관련 문제