模板中的 Ember 触发器控制器操作答案

【问题标题】：Ember Trigger Controller Action from Template模板中的 Ember 触发器控制器操作
【发布时间】：2014-07-14 15:38:22
【问题描述】：

我将首先解释我想要做什么，因为也许有比我正在尝试的更好的解决方案：我正在使用引导网格布局并尝试根据我使用 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 方法。那可能吗？我刚刚想到的一个想法是使用自定义车把助手来增加属性，但我不确定它是否可以访问控制器。对于我正在尝试做的事情，有没有更好的选择？谢谢！

【问题讨论】：

标签： twitter-bootstrap templates ember.js controller handlebars.js

【解决方案1】：

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

{{#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>');
});

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

【讨论】：

【解决方案2】：

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

在你的模板中

{{#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');
});

【讨论】：