有没有简单的方法来设计HTML把手模板

问题描述：

我正在寻找一种简单的方法来创建一些静态的HTML页面设计，但使用把手部分来缓解向开发人员的移交。即创建有没有简单的方法来设计HTML把手模板

index.html 
sidebar.html 
main.html 
product.html 
product_stub.html

等等。然后建立网页的简单方法，所以我可以看到他们在Chrome：

的index.html：

<html> 
... 
<body> 
<div class="sidebar">{{ include sidebar.html }}</div> 
<div class="main">{{ include main.html }}</div> 
</body>

main.html中：

{% for i in 0 to 10 %} 
{{ include product_stub.html }} 
{% endfor %}

然后product_stub.html可能看起来像：

<div class="product-stub"> 
    <h2>Product Name</h2> 
    <p>some lipsum text...</p> 
</div>

那么理想情况下，开发人员可以采取这些相同的文件，添加魔术 - 然后设计师公司uld编辑来调整设计..

答

看看assemble，它是专门为此目的。

这看起来是个不错的选择。我们创建了一个简单的“加载”句柄帮助程序，它将加载到模板中 - 请参阅下面的答案。 – 2013-05-20 07:29:58

答

我们创建了一个“负载”车把帮手在模板负荷：

cache = {} 
    template = (name) -> 
    t = cache[name] 
    if t? 
     return t 

    raw = null 
    $.ajax 
     url: "/static/templates/#{ name}.hbs" 
     async: no 
     type: 'GET' 
    .done (text) -> 
     raw = text 
    .fail (err) -> 
     if window.appdebug 
     # if app is running in "debug" mode, fallback to possible design 
     # template 
     url = "/static/design/#{ name }" 
     url = url + '.hbs' if not url.match(/\.hbs$/) 
     $.ajax 
      url: url 
      async: no 
      type: 'GET' 
     .done (text) -> 
      raw = text 

    if not raw? 
     throw "Cannot fetch template #{ name }" 

    t = Handlebars.compile(raw) 
    cache[name] = t 
    t 

    Handlebars.registerHelper "load", (name, ctx) -> 
    new Handlebars.SafeString(template(name)(ctx))

然后在调试模式下，我可以有一个模板，这是否：

<div class="container content"> 
{{load "common.breadcrumbs"}} 
<div class="row"> 
    <div class="span12"> 
     <div class="main"> 
      {{load "product.edit.maindetails"}} 
      ...

所以我们可以再看看整个页面被设计者分割成把手模板，很容易被开发人员添加到HBS代码的其余部分。

有没有简单的方法来设计HTML把手模板

相关推荐