Question

我正在使用的Ember版本使用Handlebars版本，在其发行说明中声称支持@index和@first。

但是，当我在我的hbs文件中使用这些时，我收到以下错误：

SyntaxError: Unexpected token ,

现在，通过一些研究，对于@index部分，

{{_view.contentIndex}}

似乎呈现索引。但是，我不能在条件中使用这些。我需要的是一个工作版本：

{{#each array}}
 {{#if @first }}
  <!-- first element specific html -->
 {{else}}
  <!-- other html -->
 {{/if}}
{{/each}}

我尝试了_view.first并尝试在帮助程序中使用_view.contentIndex，但失败了。有解决方法吗？

编辑：正在使用的ember版本是v1.0.0

Answer 1

请坚持使用Ember指南而不是Handlebars指南。 Ember现在使用它自己的Handlebars版本 - HTMLBars，它有很多不同之处。这就是为什么你不能说：

我正在使用的Ember版本使用了Handlebars的版本

至少如果您使用的是最新版本。

然而，您可以以不同的方式访问数组的第一个元素：

array.[0]

您也可以使用index：

{{#each array as |item index|}}
  {{index}} is index of current element
{{/each}}

您还可以使用ember-truth-helpers插件模仿@first的行为，并利用eq帮助程序 - 感谢 kristjan reinhold 这个想法：

{{#each array as |item index|}}
  {{if (eq index 0)}}
    <!-- first element specific html -->
  {{else}}
    <!-- other html -->
  {{/if}}
{{/each}}

Answer 2

我最终通过注册一名Ember助手来解决这个问题。

/* Attempt to add a first to each class. */
Ember.Handlebars.registerHelper('ifFirst', function(value, options) {
    var context = (options.fn.contexts && options.fn.contexts[0]) || this;
    var currentIndex = options.data.view.contentIndex;
    if (currentIndex == 0){
        // return true
        return options.fn(this);
    } else {
        // return false
        return options.inverse(this);
    }
});

这可能有点过头了，但是想法是如果你因为contentIndex已经包含数组的索引，你只需要检查它是否等于0.也可以用来检查最后一项，只要你做一定要检查阵列的长度。

当然，我同意之前的答案，即在可能的情况下升级到更新版本的Ember肯定会更好，但对于那些像我现在一样陷入困境的人，我希望这会有所帮助。

Answer 3

此解决方案无需任何助手即可运行。

{{#each items as |item notFirst|}}
   {{#if notFirst}}
      // handle second to last item here
   {{else}}
      // handle first item of array here
   {{/if}}
{{/each}}

Handlebars @first不使用Ember.js 1.0.0

3 个答案: