Emberjs 1.x-pre- Ember.Router 和 Ember.computed 问题 [英] Emberjs 1.x-pre- Ember.Router and Ember.computed issues

问题描述

我正在阅读 http://code418.com/blog/2012/03/26/advanced-emberjs-bindings/ 并遇到 Ember.Binding.and for transformstrong> 在 Ember.computed 的当前 emberjs 中已弃用.我决定更新旧的 emberjs 0.9.x fiddle http://jsfiddle.net/Wjtcj/ 以使用 emberjs 1.x 并提供 Ember.computed.and 如新的 fiddle <强>http://jsfiddle.net/Wjtcj/5/.虽然它有效，但我不能让它返回与旧版本相同的输出，但是当代码的改进版本 http://jsfiddle.net/Wjtcj/28/ 因

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>

似乎 setSync 函数是问题所在并且失败，因为我正在调用它的计算属性.

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>​

更新，更新代码请使用此链接http://jsfiddle.net/Wjtcj/28/.下面的代码不再适用

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.

推荐答案

你的例子中有很多地方出错了，我不确定这是否能说明问题，但我认为这就是你想要完成的:http://jsfiddle.net/machty/Wjtcj/31/

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/

要点

1. 除非您正在执行测试用例或其他一些不寻常的情况，否则您很少需要手动调用 Ember.run.sync().
2. 您试图在 ObjController 中塞入太多东西.预期目的是显示用户及其权限列表；我采用了使用 ArrayController 管理用户列表的常见模式，然后使用 UserView 显示每个用户.
3. 您原来的 是由于尝试将 applicationController 的插座连接到... applicationController，因此出现递归和堆栈溢出
4. 绑定和计算属性之间存在差异.如果您使用的是计算属性，请不要在属性末尾放置绑定"

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

所以不是这样:

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

这样做

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

这篇关于Emberjs 1.x-pre- Ember.Router 和 Ember.computed 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！