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回调参数＆＃34; CallbackOnSelect＆＃34;：＆＃34; manageCVModelWindow＆＃34; //管理自定义视图子标签点击功能

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

}

现在点击＆＃34;删除此视图＆＃34;如何删除所选列表？

Answer 1

您不应该将jQuery与Knockout混合来处理点击事件，让Knockout为您完成所有工作。首先，您应该存储所选项目的某个位置，因此对click使用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>

knockoutjs onclick一个按钮如何从数组中删除选定的列表项

1 个答案: