2014-11-28 6 views
1

내 스크립트에서 HTML 블록을 관리하는 방법이 필요합니다. 내 방식대로 읽을 수 없다는 말을 들었습니다. 일반적으로, 내가 좋아하는 뭔가를 작성합니다 다음템플릿 마크 업 블록 관리 전략

app.templates = (function() { 
    return { 
     status: '{0}<br />{1}', 
     date: '{0} - {1}', 
     details: '<li><i class="sprite"></i>{0} cart</li> \ 
        <li><i class="sprite"></i>{1} total</li> \ 
        <li><i class="sprite"></i>{2} items</li>' 

그런 다음 내가 좋아하는 뭔가를 할 거라고 : $('.status').html(utls.format(app.templates.status, status));

나는 누군가가 나를 가리킬 수 있습니다, 이러한 템플릿 블록이 아닌 사소한를 관리해야합니까 이것을하기위한 더 나은 전략의 방향?

+1

, 당신은 mustache.js보고 할 수 있습니다 또는 (http://handlebarsjs.com/) + [핸들] 위 – ochi

+1

^을 ember.js, [밑줄] (HTTP : //underscorejs.org/#template) 등 –

답변

0

knockout templates 접근 방식을 사용하여 "text/html"유형의 스크립트 태그에 넣을 수 있습니다 (브라우저에서 효과적으로 무시할 수 있음). 그런 다음 연관 검색을 수행하고 템플릿 마크 업을 id까지 가져올 수 있습니다. 당신은 풍부한 템플릿이있는 경우

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 

     </style> 
     <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"> 
     </script> 
     <script type="text/html" id="foo"> 
      <div>here is some markup</div> 
     </script> 
     <script> 
      $(function(){ 
       var templates={}; 
       $('head script[type="text/html"]') 
        .each(function(idx,scr){ 
         var id = $(scr).attr("id"); 
         var html = $(scr).html(); 
         templates[id]=html; 
        }); 
       alert(templates["foo"]); 
      }); 
     </script> 
    </head> 
    <body> 
     woo-har! 
    </body> 
</html>