2

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

 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 函数是问题所在并且失败了，因为我正在调用它的计算属性。

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/。下面的代码不再适用

 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');
            }
        })
    })
  })
});

​</p>

感谢您的任何建议或修复。

4

1 回答 1

3

您的示例中出现了很多问题，我不确定这是否能说明问题，但我认为这就是您要完成的工作：http: //jsfiddle.net/machty/Wjtcj/31/

要点

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

所以代替这个：

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'),
于 2012-11-15T08:23:52.610 回答