문자열 작성과 innerHTML 설정보다 HTML 위젯을 채우는 더 좋은 방법이 있습니까?

Question

XML XSLT를 사용하면 HTML로 멋진 템플릿을 만들고이를 XSLT로 변환하고 서버에서 오는 xml 데이터를 사용하여 클라이언트 측에서 위젯을 동적으로 채울 수 있습니다.

JSON 및 JSONP는 서버 측과 상호 작용하고 JS에서 데이터를 조작하는 데 적합합니다. JSON 데이터를 렌더링 할 때, JS를 사용하여보기 흉한 문자열을 연결하고 일부 요소의 innerHTML을 렌더링하는 예를 보았습니다.

HTML 위젯을 만들고 문자열 위주 또는 DOM 요소로드를 포함하지 않는 JSON으로 쉽게 채울 수있는 브라우저 호환 방법이 있습니까?

Answer 1

다른 답변에서 언급했듯이, 당신이 찾고있는 것은 자바 스크립트 기반의 템플릿 언어입니다. 이 related question에 들어가는 꽤 좋은 목록이 있습니다. 한 쌍을 강조하기 위해 mustache은 깨끗하고 단순하며 다양한 언어로 포팅되었습니다. 트위터에 의해 사용된다고 나는 믿는다. Google Closure은 JavaScript와 Java에서 모두 작동하는 template language입니다. 그것은 분명히 구글의 전투 테스트입니다.

다른 주요 JS 라이브러리에는 플러그인 또는 라이브러리의 일부로 템플릿이 있습니다. jQuery에는 최소한 하나의 플러그인이 있으며 v1.5의 로드맵에서 하나를 계획하고 있습니다. Dojo에는 clone of Django's templating language이 꽤 멋있습니다.

다른 것들도 있지만, 나는 그것이 작물의 크림이 될 것이라고 생각합니다.

가정에서 자란 제품을 사용하기 때문에 실제로 사용하지는 않지만 작업하기가 매우 좋으며 문자열 연결을 통해 권장하거나 서버에서 더 많은 작업을 수행 할 것을 권장합니다. .

Answer 2

jQuery과 템플릿을위한 jQuery Plugin을 사용할 수 있습니다. 예를 http://ivorycity.com/blog/jquery-template-plugin/를 들어

Answer 3

당신은 존 Resiq하여이 블로그 게시물을 참조한다 (이 페이지에서 봐, 멋진 샘플이 있습니다) : JavaScript Micro-Templating

그것은 당신이 다시 사용할 수있는 간단한 마이크로 템플릿 코드가 있습니다. 그것은 다음과 같이 진행됩니다

// Simple JavaScript Templating 
// John Resig - http://ejohn.org/ - MIT Licensed 
(function(){ 
    var cache = {}; 

    this.tmpl = function tmpl(str, data){ 
    // Figure out if we're getting a template, or if we need to 
    // load the template - and be sure to cache the result. 
    var fn = !/\W/.test(str) ? 
     cache[str] = cache[str] || 
     tmpl(document.getElementById(str).innerHTML) : 

     // Generate a reusable function that will serve as a template 
     // generator (and which will be cached). 
     new Function("obj", 
     "var p=[],print=function(){p.push.apply(p,arguments);};" + 

     // Introduce the data as local variables using with(){} 
     "with(obj){p.push('" + 

     // Convert the template into pure JavaScript 
     str 
      .replace(/[\r\t\n]/g, " ") 
      .split("<%").join("\t") 
      .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
      .replace(/\t=(.*?)%>/g, "',$1,'") 
      .split("\t").join("');") 
      .split("%>").join("p.push('") 
      .split("\r").join("\\'") 
     + "');}return p.join('');"); 

    // Provide some basic currying to the user 
    return data ? fn(data) : fn; 
    }; 
})(); 

그래서 당신은 템플릿 마크 업에있을 것입니다 :

<script type="text/html" id="item_tmpl"> 
    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> 
    <div class="grid_1 alpha right"> 
     <img class="righted" src="<%=profile_image_url%>"/> 
    </div> 
    <div class="grid_6 omega contents"> 
     <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p> 
    </div> 
    </div> 
</script> 

그것을 사용하려면 :

var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject); 

것은 명확하게하기 위해 - 위의 예제가에서 찍은 블로그 게시물은 이 아니며 내 코드입니다. 자세한 정보는 링크를 클릭하십시오.