如何使用Ember.js和Handlebars.js渲染（Twitter Bootstrap）网格？

问题描述

我很难想出使用Ember.Handlebars渲染以下标记的方式：

 < div类=行流体> 
< div class =span4> Item＃1（row＃1 / column＃1）< / div> 
< div class =span4>项目＃2（行＃1 /列＃2）< / div> 
< div class =span4> Item＃3（row＃1 / column＃3）< / div> 
< / 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> 
< div class =row-fluid> 
< div class =span4>项目＃7（行＃3 /列＃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>'; 
} 
} 
 
输出+ ='< / div>'; 
  

理想情况下，我将其放在自定义Handlebars帮助器中（从而从模板中删除逻辑）但仅解释了如何编写简单的帮助程序，我真的不知道如何编写更复杂的有谁知道使用Twitter Bootstrap的网格系统和Ember模型集合的最佳方式？

提前谢谢！

David

解决方案

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

这是模板：

  {{＃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}} 
  

相应的控制器：

  App.PostsController = Ember.ArrayController.extend（{
 posts：function（）{
 var length = this.get（'length'）; 
 
 return this.map（function（post，i）{
 //检查它是否是最后一个帖子
 if（（i + 1）== length）{
 post.last = true; 
} else {
 post.last = false; 
 
 //检查它是否是第一个帖子
 if（i == 0）{
 post.first = true; 
} else {
 post.first = false; 
} 
 
 //检查它是否是行的最后一个帖子
 if（（i + 1）％3 == 0）{
 post.lastOfRow = true; 
} else {
 post.lastOfRow = false; 
} 
} 
 
 return post; 
}）; 
} .property 'content。@ each'）
}）; 
  

这也可能有助于生成表（使用< td> / code>嵌套在< tr> ）...即使我最终使用猕猴桃的解决方案！ ; - ）

问候，

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）网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！