ember.js проверить все флажки

Question

Привет, я изучаю ember и застрял с флажками.

Heres мой шаблон (часть):

<table> 
        <thead> 
        <tr> 
         <th class="cell-delete"> 
          {{input type="checkbox" id=colorId name=colorId class="js-custom-checkbox" checked=allChecked}} 



         </th> 
         <th class="cell-star"> 
          &nbsp; 
         </th> 
         <th class="cell-broadcaster">Author</th> 
         <th class="cell-title">Title</th> 
         <th class="cell-date">Date</th> 
        </tr> 
        </thead> 
        <tbody> 

        {{#each message in model.entities}} 

         <tr> 
          <td class="cell-delete"> 

           {{input type="checkbox" id=trash name="trash[]" tabindex= message.id class="js-custom-checkbox check1" }} 

          </td> 
          <td class="cell-star"> 
           {{input type="checkbox" name=message.id tabindex=message.id class="starBox" }} 

          </td> 
          <td class="cell-broadcaster"> 
           {{message.notification.autor.firstName}} {{message.notification.autor.lastName}} 
          </td> 
          <td class="cell-title"> 
           {{#link-to 'notifications.details' message.notification.id}}{{message.notification.title}}{{/link-to}} {{#unless message.isRead}} (new) {{/unless}} 
          </td> 
          <td class="cell-date"> 
           {{formatDateWithDistance message.notification.cdate}} 
          </td> 
         </tr> 

        {{/each}} 

        </tbody> 
       </table> 

И мой вопрос заключается в том, чтобы включить действия, чтобы проверить все флажки в этом шаблоне?

Данные для этого принимается в маршрутизатор формы JSon апи:

export default Ember.Route.extend(AuthenticatedRouteMixin, { 

model: function() { 
    return $.getJSON(ENV.apiHost + "/api/notificationdata/user/all"); 

}, 
..... 

Answer 1

Если вы действительно заинтересованы в изменении данных о вашей модели, вы должны подключить флажки к чему-то. Прямо сейчас кажется, что они будут отображаться, и вы можете проверить и снять отметку с них, но на самом деле это ничего не изменит, кроме изменения цвета нескольких пикселей на вашем компьютере.

С помощью флажков вы должны подключить их к значению в текущем контроллере. Вы делаете это, настраивая логическое значение в этом контроллере и привязывая его к атрибуту вашего флажка. Если это значение в контроллере было названо allChecked он может выглядеть следующим образом:

{{input type="checkbox" checked=allChecked}} 

Как только это будет сделано, вы можете подключить один последний флажок для свойства контроллера, который будет инициировать контроллер изменить все значения, связанные с установите флажки на true.

Здесь действительно недостаточно контекста, чтобы дать вам ответ, который вы можете сразу подключить и заставить его работать. Но ваш контроллер может выглядеть так:

...Ember.Controller.extend({ 

    allChecked: null, 
    allCheckedWatcher: function(){ 
    if(this.get('allChecked') === true){ 
     // function to set all the other properties to true 
    } 
    }.observes('allChecked'), 

}) 

Будьте осторожны, приведенный выше пример будет работать только для проверки всех ящиков. Это не ослабило бы их. Это очень рудиментарно и только включено, чтобы проиллюстрировать идею того, как все это работает.

Возможно, вы захотите, чтобы read up on checkboxes, затем проверьте часть Ember TodoMVC, где они упоминают toggling all todos взад и вперед.

Answer 2

Ok благодаря кончиков Дона я сумел сделать так им разместить свой код для других:

первый шаблон:

-checkbox в selece/Отменить все:

{{input type="checkbox" checked=allChecked}} 

• кол-во:

  
  {{#each message in model.entities}} 
  {{input type="checkbox" id=trash name="trash[]" checked=message.isDrop tabindex= message.id class="check1" }} 
  
  {{/each}} 
   
  

Мой маршрутизатор:

export default Ember.Route.extend(AuthenticatedRouteMixin, { 

model: function() { 

    return $.getJSON(ENV.apiHost + "/api/forum/user/all"); 

}, 

afterModel: function(model) { 

    model['entities'].setEach('isDrop', false); 


}, 
... 

И мой контроллер:

export default Ember.ObjectController.extend({ 
selected: false, 

isDrop: false, 

allChecked: null, 
allCheckedWatcher: function(){ 
    var model = this.get('model'); 
    if(this.get('allChecked') === true){ 

     model['entities'].setEach('isDrop', true); 
    } else { 

     model['entities'].setEach('isDrop', false); 
    } 
}.observes('allChecked'), 
....