Question

我正在寻找一种简单的方法来创建一些静态html页面设计，但是使用handlebars partials来简化向开发人员的切换。即创建

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>

然后理想情况下，开发人员可以采用这些相同的文件，添加魔法 - 然后设计师可以编辑以调整设计..

Answer 1

看看assemble，它专门用于此目的。

Answer 2

我们创建了一个加载到模板中的“加载”手柄帮助器：

  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车把模板

2 个答案: