ember.js - When my computed property is updated the linkTo attr does not get update in ember RC1

Question

Here is the linkTo helper in my handlebars template

{{#linkTo 'person.page' nextPage target="controller"}}Next{{/linkTo}}

Here is my controller

PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, {
    itemsPerPage: 2
});

Here is the computed property in the mixin

  nextPage: function() {

    var nextPage = this.get('currentPage') + 1;
    var availablePages = this.get('availablePages');

    if (nextPage <= availablePages) {
        return Ember.Object.create({id: nextPage});                                 
    }else{
        return Ember.Object.create({id: this.get('currentPage')});
    }   

  }.property('currentPage', 'availablePages'),

when I console log just before each return statement I can see the page id is correct ... yet my html isn't updated. Anything simple that I'm doing wrong in the above?

Also I do see a print each time I change the page (so the computed properties I depend on are being fired)

Here is a full blown jsfiddle showing that after you click next the first time ... it still points at /#/page/2 instead of /#/page/3

http://jsfiddle.net/RhTyx/2/

Thank you in advance

Answer 1

First off: It would be nice, if you would not link a fiddle where the most important code is not part of the fiddle (the FilterSortSliceMixin). Therefore one cannot test anything, despite the fact the fiddle was really huge and contained lots of unnecessary code.

Regarding your problem: I think this cannot work because the dependent properties you specified do not do anything. Your {{#linkTo}} helper sends the user into the the PersonPageRoute. The code of this route is:

PersonApp.PersonPageRoute = Ember.Route.extend({
    model: function(params) {
        return PersonApp.Person.find(params.page_id);
    },
    setupController: function(controller, model) {
        this.controllerFor('person').set('selectedPage', model.get('id'));
    }
});

So you are getting the personcontroller and set the property selectedPage. But this property is not specified in your dependent keys. So therefore i would suggest this:

//maybe even remove currentPage??
}.property('currentPage', 'availablePages' , 'selectedPage'),

So i guess you got confused with your naming. I guess, you should either have the property 'selectedPage' or 'currentPage', right?

Update: This is definitely a bug. Heres an excerpt from the LinkView class, which is used with the linkTo helper:

var LinkView = Ember.View.extend({
  attributeBindings: ['href', 'title'], 
  href: Ember.computed(function() {
      var router = this.get('router');
      return router.generate.apply(router, args(this, router));
  })
});

As you see it does not specify any dependent keys. Maybe you can reopen/patch this class and add the dependent key. Don't know which one this would have to be, but maybe context?