Question

我先解释一下我想要做的事情，因为这可能比我尝试的解决方案更好：我使用引导网格布局并尝试创建新行和编程方式根据我的模型使用ember。我现在拥有的是：

{{#each model}}
    {{#if beginRow}}
            <div class="row">
    {{/if}}
    <div class="col-sm-3">
            stuff
    </div>
    {{#if endRow}}
            </div>
    {{/if}}
{{/each}}

我根据计数器计算了beginRow和endRow个计算属性，每次循环执行每个计数器时我想要递增。

App.MyController = Ember.ArrayController.extend({
    currentIndex: 0,
    beginRow: function() {
        if(this.get('currentIndex')%3 == 0) {
            return true;
        } else return false;
    }.property('currentIndex'),
    endRow: function() {
        if(this.get('currentIndex')%3 == 0) {
            return true;
        } else return false;
    }.property('currentIndex'),
    actions: {
        incrementCurrentIndex: function() {
            this.incrementProperty('currentIndex');
        },
    }
});

我认为这样可行，但这里缺少的部分是每个循环调用incrementCurrentIndex方法。那可能吗？我刚想到的一个想法是使用自定义把手帮助器来增加属性，但我不确定它是否可以访问控制器。有没有比我想要做的更好的替代方案，我可以忽视？谢谢！

Answer 1

找到了一个很好的解决方案！而不是使用我的控制器，我使用_view.contentIndex获取每个帮助器中的索引，并将该值发送到两个Handlebars Helpers，如下所示：

{{#each model}}
    {{isNewRow _view.contentIndex 3}}
    <div class="col-sm-4">
        stuff   
    </div>
    {{isEndOfRow _view.contentIndex 3}}
{{/each}}

助手根据索引和列数计算这是否应该是新行：

Ember.Handlebars.registerBoundHelper('isNewRow', function(index, columns) {
    if(index%columns == 0)
        return new Ember.Handlebars.SafeString('<div class="row">');
});

Ember.Handlebars.registerBoundHelper('isEndOfRow', function(index, columns) {
    if(index%columns == columns-1)
        return new Ember.Handlebars.SafeString('</div>');
});

希望这可以帮助其他有类似问题的人！

Answer 2

我建议将数组分成小数组，其中包含3个元素。把手不是编写逻辑的好地方。始终尝试将您的逻辑移动到控制器中。

在您的模板中

{{#each slice in slicedArray}}
  <div class="row">
    {{#each item in slice}}
      <div class="col-sm-3">
        {{!-- Do your stuff --}}
      </div>
    {{/each}}
  </div>
{{/each}}

对于您的控制器

App.MyController = Ember.ArrayController.extend({
  slicedArray: function(){
    // slice your array into small ones and return it
  }.property('model');
});

模板中的Ember Trigger Controller Action

2 个答案: