如何访问 ember 模板中的数组位置？

Question

我在 Ember 中尝试做一件简单的事情时遇到了一些挫折。
我知道所有的混乱都来自于从模板中分离逻辑，但我认为我想要实现的目标并不那么昂贵。
我有一个模型 returns 我有一个项目列表，这些项目有一个相关的属性并且取决于属性的值是否重复，模板应该显示一些东西。
我返回的数据应该是这样的：

[{id :0,
  text:"Element 0",
  nested_property: {
    value:'Value 1'
  }
},{id :1,
  text:"Element 1",
  nested_property: {
    value:'Value 1'
  }
},{id :2,
  text:"Element 2",
  nested_property: {
    value:'Value 2'
  }
},{id :3,
  text:"Element 3",
  nested_property: {
    value:'Value 2'
  }
},{id :4,
  text:"Element 4",
  nested_property: {
    value:'Value 1'
  }
}]

我要制作的是这样的：

<ul>
  <li>
    <span>Value 1</span>
    <span>Element 0</span>
  </li>
  <li>
    <span>Element 1</span>
  </li>
  <li>
    <span>Value 2</span>
    <span>Element 2</span>
  </li>
  <li>
    <span>Element 3</span>
  </li>
  <li>
    <span>Value 1</span>
    <span>Element 4</span>
  </li>
</ul>

我的第一个想法是："Well, I keep the value of the actual loop on a variable, and compare in the next loop. If it's different override the value."
由于我们不能使用 "if" 来比较两个变量，因此我必须创建一个组件来进行比较。这样那部分问题就解决了。
我现在面临的是如何跟踪最后一个循环值，因为我的组件需要它与实际值进行比较。
我无法使用任何这些选项访问循环内的某个元素：

{{#each model as |element key|}}
    {{model.0.text}}
    {{model[0].text}}
    {{model[key-1].text}} <--- That would be awesome if works :D
{{/each}}

有什么想法吗？也许另一种解决问题的方法？

Answer 1

我的建议是在 javascript 中执行此操作，您可以使用全套工具。

Ember 的方法是制作一个可以处理您的数据以供展示的计算器。

binData: Ember.computed('origData', function() {
    let origData = this.get('origData');
    // use Ember collection utilities, lodash, whatever here
    // to bin your data and make it an easy object to loop in hbs
}

现在您可以在模板中使用 binData。而且，由于 Ember 的魔力，它会在 binData 更新时更新！

Answer 2

如果您想遍历数组模型，那么您可以执行以下操作：

  {{#each model as |item|}}
    {{index}}
    {{item.text}}
    {{item.nested_property.value}}
  {{/each}}

如果你想获取数组模型的最后一个元素，你可以执行以下操作：

{{model.lastObject}}

如果你想获取数组模型的特定元素，你可以执行以下操作：

{{get model '2'}}

一切都很简单:) P.S。为此

你需要使用最新的ember

Answer 3

非常感谢@Bek 的回答，因为它让我走上了正确的轨道。我把它写在这里只是为了谷歌员工。
使用第三个选项是工作的一部分，要在 ember 标记内使用它，必须在括号之间完成：

{{ log (get model 1) }}

由于我需要访问动态部分和固定字符串的连接以指示对象属性，因此我不得不使用：

{{ log (get model (concat variable 'fixed.string')) }}

至少，但不是最后...因为我需要访问实际位置之前的位置，所以我应该在其中使用数学运算。而且没有内置的助手来获取它，所以我在这里找到它 Math Ember Helper 最终代码看起来像这样：

{{#each model as |item index|}}
  {{ log (get model (concat (math key '-' 1) 'nested_property.value')) }}
{{/each}}

如何访问 ember 模板中的数组位置？

How to access an array position in a ember template?

javascript

each

handlebars.js

ember.js