Question

我想要一个操作，将我桌子上所有选中的复选框打印到控制台。

在我的控制器中我有

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

在我的模板文件中

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

我已经设置了我的控制器来过滤所有＆＃34; isSelected＆＃34;在表格中使用ember上的输入助手。

我在控制台上收到错误，指出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

在你的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);
    }

Answer 2

我这样做了，你可以检查旋转（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);
}

使用{{input type =＆＃34; checkbox＆＃34;}}删除EmberJS上的多条记录

2 个答案: