我正在尝试使用 childViews 计算属性制作 ContainerView,这取决于控制器。问题是,当控制器的内容更改时,该属性不会更新(当另一个依赖属性更改时它也不会更新)。请告诉我我做错了什么......
示例:http: //jsfiddle.net/frZ3a/5/
Javascript:
App = Em.Application.create({});
App.controller = Em.ArrayController.create({
reversed: false,
content: [],
init: function() {
var c = this;
function addContent() {
if (c.get('content').length < 10) {
c.get('content').push(c.get('content').length);
setTimeout(addContent, 1000);
console.log(c.get('content'));
}
}
addContent();
return this._super();
}
});
App.TestView = Em.View.extend({
templateName: 'single',
number: null
})
Em.ContainerView.create({
templateName: 'test',
tagName: 'div',
controller: App.controller,
reversedBinding: 'controller.reversed',
childViews: function() {
var result = this.get('controller.content').map(function(el) {
return App.TestView.extend({number: el});
});
if (this.get('reversed')) {
result.reverse();
}
return result;
}.property('controller.content.@each', 'reversed')
}).append();
Em.View.create({
templateName: 'reverse',
controller: App.controller,
reversedBinding: 'controller.reversed',
reverseContent: function() {
this.set('reversed', !this.get('reversed'));
}
}).append();
html:
<script type="text/x-handlebars" data-template-name="single">
Single view: {{view.number}}
</script>
<script type="text/x-handlebars" data-template-name="reverse">
<a {{action reverseContent}}>Reverse</a>
</script>
</p>