在Ember中是否有itemController用于新的每个语法？

Question

新语法

{{＃each pages as | page | itemController = “listedPage”}}

导致解析错误。项目控制器是否可以使用新的“每个”语法？ 如果是，如何指定？如果不是，使用“each”项目的计算属性的首选方法是什么？

Answer 1

控制器正在逐步淘汰 - 所以我建议使用组件..

每个项目的组件

您可以实现一个“列出的页面”组件，如下所示：

您的模板：

<ul>
{{#each pages as |page|}}
    {{listed-page page=page}}
{{/each}}
</ul>

组件：

## components/listed-page.js

export default Ember.Component.extend({
  tagName: 'li',

  page: null,

  pageNumberFancy: function() {
    return '^'+this.get('page.number')+'^';
  }.property('page.number')
})

## templates/components/listed-page.hbs

Number: {{page.number}} ({{pageNumberFancy}})

输出：

<div class='template-level'>
  <ul class='template-level'>
    <li class='listed-page-level'>Number: 1 (^1^)</li>
    <li class='listed-page-level'>Number: 2 (^2^)</li>
  </ul>
</div>

列表的组件

或列出的页面组件 - 如果'pages'是数组计算属性 - 或两者：

您的模板：

{{listed-pages pages=pages}}

组件：

## components/listed-pages.js

export default Ember.Component.extend({
  tagName: 'ul',

  pages: null,

  pagesPlusOne: function() {
    var pagesList = this.get('pages');
    pagesList.addObject(specialPage);
    return pagesList;
  }.property('pages.[]')
})

## templates/components/listed-pages.hbs

{{#each pagesPlusOne as |page|}}
  {{listed-page page=page}}
{{/each}}

输出：

<div class='template-level'>
  <ul class='listed-pages-level'>
    <li class='listed-page-level'>Number: 1 (^1^)</li>
    <li class='listed-page-level'>Number: 2 (^2^)</li>
    <li class='listed-page-level'>Number: +1 (^+1^)</li>
  </ul>
</div>