Knockoutjs 通过选中复选框删除多个答案

【问题标题】：Knockoutjs remove multiple by selecting checkboxKnockoutjs 通过选中复选框删除多个
【发布时间】：2015-08-27 17:54:04
【问题描述】：

我有一个使用 foreach 绑定显示的“资产”列表。每个资产都有一个调用 $parent.removeAsset 的删除按钮，一切正常。

但是，我想添加选项以通过选中复选框来选择多个“资产”，然后删除所有选中的“资产”。

我仍在学习 knockoutjs 的技巧，所以我非常感谢任何帮助。

这是我用来显示“资产”的代码

<div style="height: 100%; overflow: auto;"  data-bind="foreach: assets">
    <!-- AssetList AssetItem Tmpl BEGIN -->
    <div class="asset-item action" data-tooltip="Select Asset">
        <div class="asset-type" data-bind="css: type">&nbsp;</div>
        <div class="asset-select"><input type="checkbox" /></div>
         <!-- ko if: type() === 'Text' -->
            <div class="asset-name" data-bind="text: content"></div>
         <!-- /ko -->
         <!-- ko if: type() === 'Image' -->
            <div class="asset-name">Image</div> 
         <!-- /ko -->
         <!-- ko if: type() === 'Video' -->
            <div class="asset-name">Video</div> 
         <!-- /ko -->
        <div class="asset-remove-cell">
            <div class="asset-remove action" data-tooltip="Remove Asset" data-bind="click: $parent.removeAsset"></div>
        </div>
    </div>
    <!-- AssetList AssetItem Tmpl END -->
</div>

这是我的删除功能：

self.removeAsset = function(asset){
    if (!confirm("Are you sure you want to delete this asset?")) {
        event.stopImmediatePropagation();            
        return false;
    }
    self.selectedIndex(0);
    $.ajax({
      url: "/Assets/delete/"+asset.id(),
      type: "POST",
      success: function(response) {
          self.assets.remove(asset);
          //notify('good',response);
      }
    });

};

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

正如@Kenneth 建议的那样，我向我的资产添加了一个布尔值，然后遍历可观察数组并删除了每个设置为 true 的资产。这是我为任何想要做类似事情的人使用的代码：

数组：

function Asset() {
    var self = this;
    self.id         =   ko.observable("");
    self.type       =   ko.observable("");
    self.selected   =   ko.observable(false);
};

删除复选框：

<input type="checkbox" data-bind="checked: selected" />

按下删除按钮时调用的函数：

$('#deleteMultipleAssets').click(function(){
    if (confirm('Are you sure you want to delete the selected asset?')) {
         ko.utils.arrayForEach(viewModel.assets(), function(asset) {
            if(asset.selected()){
                viewModel.removeMultipleAsset(asset);
            }
        });
    }
});

removeMultipleAssets 函数：

self.removeMultipleAsset = function(asset){
  self.assets.remove(asset);
};

【讨论】：

不要忘记将答案标记为已接受，这样问题就会被记录为 SO.... 已解决。

【解决方案2】：

您应该在资产中添加一个名为 selected 的字段，然后将该字段绑定到您在 foreach 模板中显示的复选框。

当您单击常规删除按钮时，您可以循环访问您的资产并删除所有 selected-字段等于 true 的资产并将其删除。

【讨论】：

感谢您的建议。您是否可能有一个循环示例来查找选定字段设置为 true 的所有资产？