Ember 2.3 如何在每个循环中使用itemControllers?
Ember 2.3 how to use itemControllers in each loops?
在任何人提出组件之前,我必须声明我知道 Ember 正在完全摆脱控制器和视图并采用组件结构。现在,我不得不在 ember2.3 中使用 controller/view,使用此处提供的遗留控制器和遗留视图插件:
https://github.com/emberjs/ember-legacy-controllers
https://github.com/emberjs/ember-legacy-views
作为升级到 Ember 2.3(从 1.7)的过程的一部分。
现在,我有一个名为 recordTypes 的路由,它列出了所有 recordType。在遗留代码中,每个 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 列表时,result 被点击,我得到的错误是:
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?
正在替换一个 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}}
在任何人提出组件之前,我必须声明我知道 Ember 正在完全摆脱控制器和视图并采用组件结构。现在,我不得不在 ember2.3 中使用 controller/view,使用此处提供的遗留控制器和遗留视图插件:
https://github.com/emberjs/ember-legacy-controllers
https://github.com/emberjs/ember-legacy-views
作为升级到 Ember 2.3(从 1.7)的过程的一部分。
现在,我有一个名为 recordTypes 的路由,它列出了所有 recordType。在遗留代码中,每个 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 列表时,result 被点击,我得到的错误是:
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?
正在替换一个 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}}