使用{{input type =「checkbox」}}

Question

刪除EmberJS上的多個記錄我想要一個操作，將我桌子上的所有選定複選框打印到控制檯。

在我的控制器

我有

removedSelected: function() { let selected = this.filterBy('isSelected', true); console.log(selected); }

在我的模板文件

我

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

我安裝我的控制器，在過濾一切都是「isSelected」的記載表通過使用輸入助手在餘燼上。

我其中規定this.filterBy is not a function

，我需要建立一個數組來處理這個問題首先在控制檯上得到一個錯誤？

下面是更多圖片的更多代碼。

謝謝！

// templates/warranty/index.hbs 

<div class="container"> 
<h4>List</h4> 
<div class="row"> 
    <div class="col-sm-3"> 
     <div class="control-group"> 
      {{#link-to 'warranty.new' class="btn btn-primary btn-sm"}}New Claim{{/link-to}} 
      <button class="btn btn-primary btn-sm" {{action "toggleMultiple"}}>Select</button> 
      {{#if canDeleteMultiple}}<button class="btn btn-danger btn-sm"{{action "removedSelected" warranty}}>Delete Selected</button>{{/if}} 
     </div> 
    </div> 
<div class="container"> 
    <table class="table table-striped table-hover "> 
     <thead> 
      <tr> 
       {{#if canDeleteMultiple}}<th>Select</th>{{/if}} 
       <th>Action</th> 
       <th>Claim ID</th> 
       <th>Claim Status</th> 
       <th>Serial Number</th> 
       <th>Issue Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      {{#each model as |warranty|}} 
       <tr> 
        {{#if canDeleteMultiple}}{{input type="checkbox" checked="isSelected"}}{{/if}} 
        <td>{{#link-to 'warranty.edit' warranty.id class='btn btn-success btn-xs'}}Edit{{/link-to}}<button class="btn btn-danger btn-xs" {{action "deleteWarranty" warranty}}>Delete</button></td> 
        <td>{{warranty.id}}</td> 
        <td>{{warranty.claimStatus}}</td> 
        <td>{{warranty.serialNumber}}</td> 
        <td>{{warranty.issueDescription}}</td> 
       </tr> 
      {{/each}} 
     </tbody> 
    </table> 
</div> 
</div> 

// app/controllers/warranty/index.js 

import Ember from 'ember'; 
export default Ember.Controller.extend({ 

actions: { 
    toggleMultiple() { 
     this.toggleProperty('canDeleteMultiple'); 
    }, 

    removedSelected: function() { 
     let selected = this.filterBy('isSelected', true); 
     console.log(selected); 
    } 
} 
}); 

Answer 1

我已經做了這種方式，你可以檢查玩弄（ https://ember-twiddle.com/aa88cd0442ec0d2219e792d58ab8b703?openFiles=templates.index.hbs%2Ctemplates.components.checkbox-component.hbs），與提及的相同通過kumkanillam，

在index.hbs我使用複選框作爲一個組件，

{{checkbox-component isChecked=warranty.isSelected action=deleteItems index=index}}{{/if}} 

和控制器動作，

removedSelected: function() { 
    let selected = this.get('model').filterBy('isSelected', true); 
    console.log(selected); 
} 

Answer 2

在你HBS文件，

{{input type="checkbox" checked=warranty.isSelected }} 
     OR 
<input type="checkbox" checked={{warranty.isSelected}} onchange={{action (mut warranty.isSelected) value="target.checked" }}> 

，並在你的控制器，

removedSelected: function() { 
     let selected = this.get('model').filterBy('isSelected', true); 
     console.log(selected); 
    }