CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Georgi Atsev
Georgi Atsev

Reputation: 3045

Ember ContainerView not updating computed property

I am trying to make a ContainerView with a childViews computed property, which depends on the controller. The problem is, the property does not update when the controller's content changes (neither does it update when another dependent property changes). Please, tell me what am I doing wrong...

Example: 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>

​ ​

Upvotes: 0

Views: 842

Answers (2)

Mike Aski
Mike Aski

Reputation: 9236

Here is a (working) improved version: http://jsfiddle.net/MikeAski/Qg3uW/

EDIT

Some interesting minor differences with yours... :-)

  • Using CollectionView instead of each helper,
  • Use toggleProperty for boolean switching,
  • etc.

Upvotes: 1

Georgi Atsev
Georgi Atsev

Reputation: 3045

The example appears to be non-functional because of the ContainerView. When I altered it a little: http://jsfiddle.net/frZ3a/18/

And changed the view to a regular Ember.View, with a content property bound to the controller's content, it started working just fine. I guess this is due to the difference in the implementation of the Ember.ContainerView.

Upvotes: 0

Related Questions