Ember - как создать и связать контроллер Checkbox?

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

Я хотел бы, что функция клик вызывает щелкнул функцию из RoleCheckboxController:

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

Но это не работает. Как я могу это исправить?

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

Answer 1

Вы можете создать экземпляр и связать контроллер с представлением с помощью правильного naming conventions.

Например, это может связать контроллер с точки зрения:

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

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

Answer 2

Ваш 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

Answer 3

@ C4P, безусловно, правы, и проблема существует в том, что ваш контроллер не создается, и, кроме того, App.RoleCheckbox не знает, что он должен использовать App.RoleCheckboxController в качестве своего контроллера.

Я не совсем уверен, что это самый Ember-й способ сделать это, но вы можете установить контроллер в (функции конструктора) init в представлении Checkbox, а затем убедитесь, что вы 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/

Надеется, что это помогает!