knockoutjs onclick a button如何從數組中刪除選定的列表項

Question

我有列表菜單和值填充形式json數組，選擇任何列表項我爲列表應用選定的樣式。

現在我有另一個刪除按鈕，點擊這個按鈕我想刪除選定的列表項？任何soln？

我的HTML：

<div class="containerStyle06 containerStyle06Ext01"> 
     <!-- ko if: myViewModelRibbon.ActiveSubTabs().length > 0 --> 
     <div id="manageCVTabsPanel"> 
      <ul id="manageCVSubTabs" data-bind="foreach: myViewModelRibbon.ActiveSubTabs"> 
       <li class="subtab_names"> 
        <span class="selectedIcon01 hide">&#xE001;</span> 
        <a> 
         <div class="subTabText"> 
          <div data-bind="text: SubTabName"></div> 
         </div> 
        </a> 
       </li> 
      </ul> 
     </div> 
     <!-- /ko --> 
    </div> 
    <div class="actionPanel02 actionPanel02Ext01"> 
     <div class="buttonGroupStyle01 hide"> 
      <div class="buttonStyle03 buttonStyle03Ext01 columnRight" data-bind="click: myParentViewModel.removeSubTabItem"> 
       <a>Delete This View</a> 
      </div> 
     </div> 
    </div> 

我的JS：

// Primary Navigation - Ribbon Menu - View Model function 
function ParentViewModel() { 
    var that = this; 
    that.myViewModelRibbon = new TabViewModel(); 


// custom view delete functionality - begin 
that.removeSubTabItem = function (data, event) { 
    data.myViewModelRibbon.ActiveSubTabs.remove(data.removeSubTabItem.SubTabName); 
} 
// custom view delete functionality - end 

    return that; 
} 
var myParentViewModel = new ParentViewModel(); 
ko.applyBindings(myParentViewModel); 


function configureSubTabs() { 
    $("#SubTabs").addClass('tabClickedColor'); 
} 

function TabViewModel() { 
    this.TabNames = (parsedParentTabJson.TabNames); 
    this.SubTabList = (parsedChildTabJson.SubTabList); 
    this.ActiveTabs = ko.observableArray(); 
    this.ActiveSubTabs = ko.observableArray(); 
    this.HiddenSubTabs = ko.observableArray(); 
    this.selectedSubTabNames = ko.observableArray(); 
    this.clickedObjectIndex = -1; 
}; 

//選擇風格應用腳本 該功能將通過JSON回調參數 「CallbackOnSelect」 工作： 「manageCVModelWindow」 //管理自定義查看子標籤點擊功能

function manageCVModelWindow() { 
    $('.manageCVModelWindow').show(); 
    $('.modelWindowBg').show(); // overlay background styles 
    $('.executeTaskModelWindow, .reassignMWContent, .customViewModelWindow').hide(); 
    $("#manageCVSubTabs li:lt(3)").hide(); // hidding the first three list item 

    $(document).on("click", "#manageCVSubTabs li", function() { 
     $(this).closest("#manageCVSubTabs").find(".selectedCVTabs").removeClass("selectedCVTabs"); 
     $(this).closest("#manageCVSubTabs").find(".selectedIcon01").hide(); 
     $(this).addClass("selectedCVTabs"); 
     $(this).children(".selectedIcon01").show(); 
     $(this).closest(".manageCVModelWindow").find(".buttonGroupStyle01").show(); 
    }); 

} 

現在點擊「刪除此視圖」如何刪除選定的列表？

Answer 1

你不應該混合使用jQuery和Knockout來處理點擊事件，讓Knockout爲你做所有的工作。首先，您應該在某處存儲選定的項目，因此請使用對li進行綁定。其次，要控制活動項CSS樣式，可以使用css binding。所以基本上，很簡單的例子是這樣的：

function Item(id, name) { 
 
    this.id = id; 
 
    this.name = name; 
 
} 
 
function ViewModel() { 
 
    var self = this; 
 
    self.items = ko.observableArray([new Item(1, 'One'),new Item(2, 'Two'),new Item(3, 'Three')]); 
 
    self.selectedItem = ko.observable(-1); 
 
    self.activateItem = function(data) { 
 
     self.selectedItem(data); 
 
    } 
 
    self.removeSelected = function() { 
 
     if (self.selectedItem() == -1) { 
 
      alert('Select an item first.'); 
 
      return; 
 
     } 
 
     self.items.remove(self.selectedItem()); 
 
     self.selectedItem(-1); 
 
    } 
 
} 
 

 
ko.applyBindings(new ViewModel());

li.active { 
 
    color: red; 
 
} 
 
li:hover { 
 
    cursor: pointer; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<ul data-bind="foreach: items"> 
 
    <li data-bind="text: name, css: { 'active': $data == $parent.selectedItem() }, click: $parent.activateItem"></li> 
 
</ul> 
 
<button data-bind="click: removeSelected">Remove selected</button>