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.

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'),