如何使用 Ember.js 和 Handlebars.js 渲染(Twitter Bootstrap)网格? [英] How to render a (Twitter Bootstrap) grid using Ember.js and Handlebars.js?

查看：23
本文介绍了如何使用 Ember.js 和 Handlebars.js 渲染(Twitter Bootstrap)网格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我很难找到一种使用 Ember.Handlebars 呈现以下标记的方法:

<div class="span4">项目#1(行#1/列#1)</div><div class="span4">项目#2(行#1/列#2)</div><div class="span4">项目#3(行#1/列#3)</div>
<div class="row-fluid"><div class="span4">项目#4(行#2/列#1)</div><div class="span4">项目#5(行#2/列#2)</div><div class="span4">项目#6(行#2/列#3)</div>

<div class="row-fluid"><div class="span4">项目#7(行#3/列#1)</div>

使用纯 JavaScript，我会做这样的事情:

var array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],output = '
';for (var i = 0, j = array.length; i < j; i++) {输出 += '
'+ i + '</div>';如果 ((i + 1) % 3 == 0) {输出 += '</div><div class="row-fluid">';}}输出 += '</div>';

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

有谁知道将 Twitter Bootstrap 的网格系统与 Ember 模型集合一起使用的最佳方法吗?

先谢谢你！最好的问候，

大卫

解决方案

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

这是模板:

{{#每个帖子在帖子}}{{#if post.first}}<div class="row-fluid">{{/如果}}<div class="span4"><div class="post">{{帖子标题}}

{{#if post.lastOfRow}}

<div class="row-fluid">{{/如果}}{{#if post.last}}

{{/如果}}{{/每个}}

以及对应的控制器:

App.PostsController = Ember.ArrayController.extend({帖子:函数(){var length = this.get('length');返回 this.map(function (post, i) {//检查它是否是最后一个帖子如果 ((i + 1) == 长度) {post.last = 真；} 别的 {post.last = 假；//检查它是否是第一篇文章如果(我== 0){post.first = true;} 别的 {post.first = false;}//检查它是否是一行的最后一个帖子如果 ((i + 1) % 3 == 0) {post.lastOfRow = true;} 别的 {post.lastOfRow = false;}}回邮；});}.property('content.@each')});

这对于生成表格也很有用( 嵌套在 中)……尽管我最终使用了 kiwiupover 的解决方案！;-)

问候，

D.

I’m having a hard time figuring a way to render the following markup using 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>

Using pure JavaScript, I’d have done something like this:

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>';

Ideally, I’d put this in a custom Handlebars helper (thus removing the logic from the template) but Ember documentation only explains how to write simple helpers and I really don’t know how to write a more complex block helper without losing the property bindings.

Does anyone know the best way to use Twitter Bootstrap’s grid system with a collection of Ember models?

Thank you in advance! Best regards,

David

解决方案

For those interested, here is a pretty clean way to handle this scenario.

Here is the template:

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

And the corresponding controller:

App.PostsController = Ember.ArrayController.extend({
  posts: function () {
    var length = this.get('length');

    return this.map(function (post, i) {
      // Checks if it’s the last post
      if ((i + 1) == length) {
        post.last = true;
      } else {
        post.last = false;

        // Checks if it’s the first post
        if (i == 0) {
          post.first = true;
        } else {
          post.first = false;
        }

        // Checks if it’s the last post of a row
        if ((i + 1) % 3 == 0) {
          post.lastOfRow = true;
        } else {
          post.lastOfRow = false;
        }
      }

      return post;
    });
  }.property('content.@each')
});

This may also be useful to generate tables (with <td> nested in <tr>)… Even though I ended up using kiwiupover’s solution! ;-)

Regards,

D.

这篇关于如何使用 Ember.js 和 Handlebars.js 渲染(Twitter Bootstrap)网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆