jQuery UI : HTML 마크 업을로드하는 가장 좋은 방법?

StackOverflow https://stackoverflow.com/questions/354473

문제

사용자 정의 jQuery UI 위젯에 HTML 마크 업을로드하는 가장 좋은 방법은 무엇입니까?

지금까지 나는 줄을 사용하여 단순히 생성 된 요소를 보았습니다 (예 : $(...).wrap('<div></div>')) 단순한 것이 좋습니다. 그러나 이것은 더 복잡한 요소에 대해 나중에 수정하기가 매우 어렵습니다.

이것은 상당히 일반적인 문제처럼 보이지만 jQuery UI 라이브러리는 이에 대한 널리 받아 들여지는 솔루션이 없을 정도로 새로운 것이라는 것을 알고 있습니다. 어떤 아이디어?

도움이 되었습니까?

해결책

매우 깔끔한 일은 이것입니다.

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

이렇게하면 요소를 생성하고 나중에 사용하기 위해 기준을 변수로 저장하고 있습니다.

다른 팁

많은 양의 복잡한 HTML이 있고 JavaScript 코드에서 하드 코드 문자열을 처리하고 싶지 않은 경우 별도의 HTML 파일에 넣고 사용할 수 있습니다. Ajax로드 기능.

연쇄 가능하므로 HTML 파일 (전체 또는 선택한 조각)을로드하여 현재 DOM에 주입하여 바로 계속 진행할 수 있습니다.

정말 복잡한 템플릿의 경우 많은 시간에 HTML 블록을 나중에 액세스 할 수 있도록 JSON 객체의 문자열로 저장합니다 ... 예 :

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

그런 다음 물건이 돌아올 때의 교체품을 수행하십시오. 이렇게하면 마크 업이 데이터를로드하기 위해 논리에서 다소 분리되어 템플릿 등을 교체하는 것이 조금 더 빠를 수 있습니다.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

어쨌든,이 접근법은 Ajax 위젯과 그와 같은 종류의 것들로 저에게 잘 작동했습니다. 여기서 디자인이 근본적으로 변할 가능성이 있습니다.

인기 있고 효율적인 방법은 스크립트 태그의 모든 추가 마크 업 (나중에 필요할 수있는 모든 것)을 브라우저에서 렌더링하지 않도록 모든 추가 마크 업 (나중에 필요한 것)을 출력하는 것입니다.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

그런 다음 jQuery를 사용하여 마크 업을 잡을 수 있습니다 ...

var markup = $('#template-example').html();

그리고 템플릿 엔진을 사용하여 여기에 던진 JS 예제를 구문 분석합니다. aUNDSCORE.JS (내가 추천하는) 또는이 답변에서 jQuery 중 하나 : jQuery 템플릿 엔진

재미있게 보내세요!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top