löschen Sie mehrere Datensätze auf EmberJS mit {{input type = "checkbox"}}}

Question

Ich möchte eine Aktion haben, die alle ausgewählten Kontrollkästchen in meinem Tisch auf der Konsole druckt.

in meinem Controller Ich habe

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

in meinem Template-Datei habe ich

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

Ich habe mein Setup-Controller alle Datensätze zu filtern, die "isSelected" in der sind Tabelle mit Eingabehelfer auf Glut.

Ich erhalte eine Fehlermeldung auf der Konsole, die this.filterBy is not a function

heißt i Setup benötigen Sie ein Array mit diesem ersten Griff?

Unten ist mehr Code für ein besseres Bild.

Danke!

// 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

ich auf diese Weise getan haben, können Sie die twiddle überprüfen (https://ember-twiddle.com/aa88cd0442ec0d2219e792d58ab8b703?openFiles=templates.index.hbs%2Ctemplates.components.checkbox-component.hbs), dasselbe wie erwähnt von kumkanillam,

in Ihrem index.hbs verwendet i Checkbox als Bestandteil,

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

und in Controller-Aktionen,

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

Answer 2

In Ihrem hbs-Datei,

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

und in Ihrem Controller,

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