Emberjs 1.x-pre- Ember.Router and Ember.computed issues

Question

I was reading http://code418.com/blog/2012/03/26/advanced-emberjs-bindings/ and came across Ember.Binding.and for transform which has deprecated in the current emberjs for Ember.computed. I decided to update the old emberjs 0.9.x fiddle http://jsfiddle.net/Wjtcj/ to work with emberjs 1.x and provided an Ember.computed.and as shown in the new fiddle http://jsfiddle.net/Wjtcj/5/. Though it works, i cant make it return thesame output as the old one but when an improved version of the code http://jsfiddle.net/Wjtcj/28/ fails with

 STATEMANAGER: Sending event 'navigateAway' to state root.
 STATEMANAGER: Sending event 'unroutePath' to state root.
 STATEMANAGER: Sending event 'routePath' to state root. 
 STATEMANAGER: Entering root.index
 <error>

It seems the setSync function is the issue and fails because i am calling computed property on it.

The handlebars template:

<script type="text/x-handlebars" data-template-name="application" >

 {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="obj" >
 {{#each App.ObjController}}
    <p>{{this}}</p>
 {{/each}}
</script>​

update, please use this link for the updated code http://jsfiddle.net/Wjtcj/28/. The code below no more applies

 App = Ember.Application.create();

  Ember.computed.and = function(dependentKey, otherKey) {    
    return Ember.computed(dependentKey, otherKey, function(key) {
    return get(this, dependentKey) && get(this, otherKey);    
   });
  };


 Ember.computed.or = function(dependentKey, otherKey) {    
    return Ember.computed(dependentKey, otherKey, function(key) {
    return get(this, dependentKey) || get(this, otherKey);    
   });
 };


 App.ApplicationController = Em.Controller.extend();

 App.ApplicationView = Ember.View.extend({
   templateName: 'application'
 });


App.ObjView = Em.View.extend({
   templateName: 'obj'
});

App.ObjController = Ember.ArrayController.extend({
  content: [],
  user: Ember.Object.create({isAdmin: false, isOwner: false}),

  isSelected: false,
  isSaveEnabled: false,
  canRead: false,
  isSaveEnabledBinding: Ember.computed.and('user.isAdmin', 'isSelected'),
  canReadBinding: Ember.computed.or('user.isAdmin', 'user.isOwner'),
  setSync: function(property, value) {
    this.set(property, value);
    Ember.run.sync(); // synchronize bindings
    this.pushObject('isSaveEnabled = %@ ; canRead = %@'.fmt(this.get('isSaveEnabled'),     this.get('canRead')));
   }
  });

  App.ObjController.setSync('isSelected', false);
  App.ObjController.setSync('user', Ember.Object.create({isAdmin: true, isOwner: false}));
  App.ObjController.setSync('isSelected', true);
  App.ObjController.setSync('user', Ember.Object.create({isAdmin: false, isOwner: true}));
  App.ObjController.setSync('user', Ember.Object.create({isAdmin: false, isOwner: false}));


 App.Router = Ember.Router.extend({
   enableLogging: true,
   location: 'hash',
   root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
        connectOutlets: function(router) {
      router.get('applicationController').connectOutlet('application');
        }

      }),

    obj: Ember.Route.extend({
       route: '/obj',
       enter: function(router) {
         console.log("The obj sub-state was entered.");
       },

        index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet( 'obj');
            }
        })
    })
  })
});

​

Thanks for any suggestions or fix.

Sigvard

Your App.obj is never defined in the last jsfiddle., which is exactly what 'Cannot call method 'setSync' of undefined' – Unconventional

Trek many thanks for taking a look. Though i hadn't updated the last link to the current one jsfiddle.net/Wjtcj/21, the error is still being displayed even after updating App.obj to App.ObjController.setSync('isSelected', false); and you can see that on the code i pasted. Is just had not yet updated the link. Since the error is still ocurring whatelse can i do. Many thanks. – Sigvard

the current link jsfiddle.net/Wjtcj/28. the problem now is it starts entering router and fails with STATEMANAGER: Entering root.index <error> – Sigvard

Answer 1

Lots of things going wrong in your example that I'm not sure this will be all that illustrative, but I think this is what you're trying to accomplish: http://jsfiddle.net/machty/Wjtcj/31/

Important points

1. It's rare that you ever need to manually call Ember.run.sync() unless you're doing test cases or some other unusual circumstance.
2. You were trying to cram too many things in ObjController. The intended purpose is to display a list of Users and their privileges; I employed the common pattern of using an ArrayController to manage the list of Users, and then displayed each one with a UserView.
3. Your original <error> was due to trying to connect applicationController's outlet to... applicationController, hence the recursion and stack overflow
4. There's a difference between bindings and computed properties. If you're using computed properties, don't put 'Binding' at end of your property

So instead of this:

isSaveEnabledBinding: Ember.computed.and('user.isAdmin', 'isSelected'),
canReadBinding: Ember.computed.or('user.isAdmin', 'user.isOwner'),

Do this

isSaveEnabled: Ember.computed.and('isAdmin', 'isSelected'),
canRead: Ember.computed.or('isAdmin', 'isOwner'),

Machinate

Alexander, many thanks for taking the time to explain what i was doing wrong and showing me the right way to handle such scenarios. Thanks too for making the code to work. – Sigvard