Ember 2.3如何在每个循环中使用itemControllers?

时间:2016-02-04 21:02:48

标签: ember.js ember-cli

在任何人提出组件之前,我必须说明我知道Ember正在完全脱离控制器和视图并采用组件结构。现在,我被迫在ember2.3中使用控制器/视图,使用此处提供的legacy-controller和legacy-view插件:

https://github.com/emberjs/ember-legacy-controllers

https://github.com/emberjs/ember-legacy-views

作为升级到Ember 2.3(从1.7)的过程的一部分。

现在,我有一个名为recordTypes的路由,它列出了所有recordTypes。在遗留代码中,每个recordType随后与itemController的“recordType”相关联。像这样:

{{#each result in searchResults itemController="recordType"}}
...
{{/each}}

令人惊讶的是,Ember的这种遗留语法没有向页面呈现任何内容,但下面的内容确实如此:

{{#each searchResults itemController="recordType" as |result| }}
 ...
{{/each}}

itemController recordType 是旧版本的对象控制器, recordTypes 控制器本身是旧版阵列控制器。

现在,对于每个结果,我有一些可以执行的操作。例如,在单击结果时,将触发 editResultName 操作。遗留代码中的此操作位于recordType控制器中。因此,点击 recordTypes 页面中的项目会将此操作推迟到 recordType 控制器,然后该控制器将会愉快地处理剩下的事情。

即使使用传统控制器,也不会在ember2.3中触发。令我更惊讶的是,这段代码可以在ember-legacy-controller.js

中找到
export default {
  name: 'ember-legacy-controllers',
  initialize: function() {
    /**
      Adds support for ArrayController in the legacy {{each}} helper
    */
    Ember._LegacyEachView.reopen({
      _arrayController: computed(function() {
        var itemController = this.getAttr('itemController');
        var controller = get(this, 'container').lookupFactory('controller:array').create({
          _isVirtual: true,
          parentController: get(this, 'controller'),
          itemController: itemController,
          target: get(this, 'controller'),
          _eachView: this,
          content: this.getAttr('content')
        });

        return controller;
      }),

      _willUpdate(attrs) {
        let itemController = this.getAttrFor(attrs, 'itemController');

        if (itemController) {
          let arrayController = get(this, '_arrayController');
          set(arrayController, 'content', this.getAttrFor(attrs, 'content'));
        }
      }
    });

  }
};

这里,它有一行引用itemController。但是,当呈现此 searchResults 列表并单击 结果 时,我得到的错误是这个:

 Nothing handled the action 'editResultName'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

操作肯定存在,但itemController中没有任何内容被识别。不幸的是,我正在更新的许多遗留代码都有itemController循环,因此能够暂时使用itemController将非常​​有帮助。

我如何使用像以前一样实现的itemController?

1 个答案:

答案 0 :(得分:3)

替换itemController。

each帮助程序内的内容创建一个组件。 itemController将成为组件的js侧,模板代码将成为template

由此:

{{#each result in searchResults itemController="recordType"}}
  <span>result: {{result.title}}</span>
{{/each}}

对此:

{{#each searchResults as |result| }}
  {{result-list-item result=result}}
{{/each}}