2

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

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

等等。然后是一种构建页面的简单方法，以便我可以在 Chrome 中查看它们：

索引.html：

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

主.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>

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

4

2 回答 2

0

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

于 2013-05-18T13:52:59.007 回答
0

我们创建了一个加载到模板中的“加载”车把助手：

  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 代码的其余部分中。

于 2013-05-20T07:34:28.247 回答