2014-11-28 2 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 или ember.js – ochi

+1

^выше + [рули] (http://handlebarsjs.com/), [подчеркивание] (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> 
Смежные вопросы