Question

这个问题与here给出的答案有关。

在视图中有一个复选框

App.RoleCheckbox = Em.Checkbox.extend({
    userRolesBinding: 'parentView.user.roles', // Points to the roles of the user

    checked: function () {
        var userRoles = this.get('userRoles');
        return userRoles.contains(this.get('content'));
    }.property('content', 'userRoles.@each'),

    click: function (evt) {
        //do something
        var controller = this.get("controller");
        controller.clicked(evt);
     }
});

我希望click函数从RoleCheckboxController调用clicked函数：

App.RoleCheckboxController = Em.Controller.extend({
    clicked: function(evt){
        //Really do the thing
    }
});

但这不起作用。我怎么能解决这个问题？

JSFiddle：http://jsfiddle.net/3fMpD/

Answer 1

@ c4p绝对是正确的，问题是你的控制器没有被创建，而且App.RoleCheckbox无法知道它应该使用App.RoleCheckboxController作为它的控制器。

我不太确定这是否是最 Ember-y 的方法，但您可以在init（构造函数>中设置控制器）复选框视图，然后只需确保send到控制器所需的所有属性：

App.RoleCheckbox = Em.Checkbox.extend({

    init: function(){
      this._super();
      this.set('controller', new App.RoleController());  
    },

    userRolesBinding: 'parentView.user.roles',

    checked: function () {
        var userRoles = this.get('userRoles');
        return userRoles.contains(this.get('content'));
    }.property('content', 'userRoles.@each'),

    click: function (evt) {
        this.get('controller').send('clicked',this.checked, this.content);
     }
});

控制器的代码（只是更改函数中使用的参数）;

App.RoleCheckboxController = Em.ObjectController.extend({
    clicked: function(checked,role){

         var userRoles = App.User.roles;

         console.log("userRoles = ", userRoles);
         console.log("role = ", role);
         console.log("will be: ", !checked ? "removed" : "added");

         if (checked) { 
             userRoles.pushObject(role); 
         } else {
             userRoles.removeObject(role);
         }

         console.log("updated userRoles = ", userRoles);

    }
});

在这里工作小提琴：http://jsfiddle.net/cfSwq/3/

希望这有帮助！

Answer 2

您可以使用正确的naming conventions实例化控制器并将其与视图关联。

例如，这会将控制器与视图关联：

// Instead of App.RoleCheckBoxController
App.ApplicationController = Ember.Controller.extend( /* ... */ );
App.ApplicationView = Ember.View.extend( /* .. */ );

JSFiddle：http://jsfiddle.net/YL5rQ/

Answer 3

您的App.RoleCheckboxController永远不会被创建。您在那里设置的方式只有ApplicationController的实例。

您可以将逻辑移回视图的click事件中，以使一切正常运行：

App.RoleCheckbox = Em.Checkbox.extend({
    userRolesBinding: 'parentView.user.roles',

    checked: function () {
        var userRoles = this.get('userRoles');
        return userRoles.contains(this.get('content'));
    }.property('content', 'userRoles.@each'),

    click: function (evt) {
        console.log("event triggered:", evt);
        //var controller = this.get("controller");
        //controller.clicked(evt);
        var isPresent = this.get('checked'),
            userRoles = this.get('userRoles'),
            role = this.get('content');

         console.log("userRoles = ", userRoles);
         console.log("role = ", role);
         console.log("will be: ", isPresent ? "removed" : "added");

         if (!isPresent) { 
             userRoles.pushObject(role); 
         } else {
             userRoles.removeObject(role);
         }
     }
});

Updated JSFiddle

Ember - 如何创建和绑定Checkbox控制器？

3 个答案: