EmberJS:#each 循环中的多个出口
EmberJS: multiple outlets within #each loop
我想完成以下功能:
条目列表 - 单击单个条目时,该条目的详细信息应显示在当前条目下方。
应该可以通过路由访问单个条目,例如tasks/1
我的做法:
I tried to solve this by including {{outlet}}
within my #each
loop but that did not quite work.
我找到的所有教程和解决方案都基于 List -> Details
方法,其中只使用一个插座。
我不知道如何解决这个问题。有更好的解决方案吗?
这无法通过路由实现。您最好使用在单击时展开、加载和显示详细信息的组件。
//list.hbs
{{#each task in tasks}}
{{#task-loader task=task}}
{{#task-loader-trigger}}
//list ui
{{/task-loader-trigger}}
{{#task-loader-content}}
//details ui
{{/task-loader-content}}
{{/task-loader}}
{{/each}}
//task-loader.js
export default Em.Component.extend({
isOpen: false
});
//task-loader-trigger.js
export default Em.Component.extend({
click: function() {
//toggle isOpen
}
}};
//task-loader-content.js
export default Em.Component.extend({
classNameBindings: ['parentView.isOpen:show:hide'],
didInsertElement: function() {
//send request and load data
}
});
如果您确实想要维护状态(当前打开的任务),请使用查询参数。希望这会有所帮助:)
我想完成以下功能:
条目列表 - 单击单个条目时,该条目的详细信息应显示在当前条目下方。
应该可以通过路由访问单个条目,例如tasks/1
我的做法:
I tried to solve this by including
{{outlet}}
within my#each
loop but that did not quite work.
我找到的所有教程和解决方案都基于 List -> Details
方法,其中只使用一个插座。
我不知道如何解决这个问题。有更好的解决方案吗?
这无法通过路由实现。您最好使用在单击时展开、加载和显示详细信息的组件。
//list.hbs
{{#each task in tasks}}
{{#task-loader task=task}}
{{#task-loader-trigger}}
//list ui
{{/task-loader-trigger}}
{{#task-loader-content}}
//details ui
{{/task-loader-content}}
{{/task-loader}}
{{/each}}
//task-loader.js
export default Em.Component.extend({
isOpen: false
});
//task-loader-trigger.js
export default Em.Component.extend({
click: function() {
//toggle isOpen
}
}};
//task-loader-content.js
export default Em.Component.extend({
classNameBindings: ['parentView.isOpen:show:hide'],
didInsertElement: function() {
//send request and load data
}
});
如果您确实想要维护状态(当前打开的任务),请使用查询参数。希望这会有所帮助:)