Question

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

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

我仍然在学习敲门声，所以我真的很感激任何帮助。

以下是我用来显示“资产

的代码

<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);
      }
    });

};

Answer 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);
};

Answer 2

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

当您点击常规删除按钮时，您可以循环浏览资源并删除所有selected - 字段等于true的资源并将其删除。

Knockoutjs通过选择复选框删除多个

2 个答案: