如何使用Ember.js和Handlebars.js呈现(Twitter Bootstrap)网格？

Question

我很难找到使用Ember.Handlebars渲染以下标记的方法:

<div class="row-fluid">
  <div class="span4">Item #1 (row #1 / column #1)</div>
  <div class="span4">Item #2 (row #1 / column #2)</div>
  <div class="span4">Item #3 (row #1 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #4 (row #2 / column #1)</div>
  <div class="span4">Item #5 (row #2 / column #2)</div>
  <div class="span4">Item #6 (row #2 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #7 (row #3 / column #1)</div>
</div>

使用纯JavaScript,我做过这样的事情:

var array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    output = '<div class="row-fluid">';

for (var i = 0, j = array.length; i < j; i++) {
  output += '<div class="span4">' + i + '</div>';

  if ((i + 1) % 3 == 0) {
    output += '</div><div class="row-fluid">';
  }
}

output += '</div>';

理想情况下,我将它放在自定义Handlebars助手中(从而从模板中删除逻辑),但Ember文档只解释了如何编写简单的助手,我真的不知道如何编写更复杂的块助手而不会丢失属性绑定.

有没有人知道使用Twitter Bootstrap网格系统和Ember模型集合的最佳方法？

先感谢您!最好的祝福,

大卫

Answer 1

对于那些感兴趣的人，这里有一个非常干净的方法来处理这种情况。

\n\n

这是模板：

\n\n

{{#each post in posts}}\n  {{#if post.first}}\n    <div class="row-fluid">\n  {{/if}}\n    <div class="span4">\n      <div class="post">\n        {{post.title}}\n      </div>\n    </div>\n  {{#if post.lastOfRow}}\n    </div>\n    <div class="row-fluid">\n  {{/if}}\n  {{#if post.last}}\n    </div>\n  {{/if}}\n{{/each}}\n

\n\n

以及对应的控制器：

\n\n

App.PostsController = Ember.ArrayController.extend({\n  posts: function () {\n    var length = this.get(\'length\');\n\n    return this.map(function (post, i) {\n      // Checks if it\xe2\x80\x99s the last post\n      if ((i + 1) == length) {\n        post.last = true;\n      } else {\n        post.last = false;\n\n        // Checks if it\xe2\x80\x99s the first post\n        if (i == 0) {\n          post.first = true;\n        } else {\n          post.first = false;\n        }\n\n        // Checks if it\xe2\x80\x99s the last post of a row\n        if ((i + 1) % 3 == 0) {\n          post.lastOfRow = true;\n        } else {\n          post.lastOfRow = false;\n        }\n      }\n\n      return post;\n    });\n  }.property(\'content.@each\')\n});\n

\n\n

<td>这对于生成表（嵌套在）\xe2\x80\xa6 中也可能很有用<tr>，即使我最终使用了 kiwiupover\xe2\x80\x99s 解决方案！;-)

\n\n

问候，

\n\n

D .

\n