Knockout.js 在Asp.net MVC中使用敲除将css附加到菜单栏

好的，我已经成功地使用knockout将css应用于我的菜单。主要思想是返回启用和禁用的按钮。所以我的主要代码是

@using PresentationLayer.Areas.Resource.Models;
@model ChecklistItemIndex


<script src="~/Areas/Resource/Scripts/ChecklistItem.js"></script>

@section StatusArea {
    <h1 class="atlas-status-area-heading">Checklist Items</h1>
}

<div>
@using (Ajax.BeginForm("SaveChecklistItem", "ChecklistItem", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "ViewEditPartial", OnSuccess="saveComplete();"}, new { id = "ChecklistItemScreen"}))

{ 
    <div class="atlas-content-wrap">
        <div id="atlas-buttons">
            <div id="NewButton" data-bind="css: newButtonClass">
                @Ajax.ActionLink("New", "New", "ChecklistItem", new AjaxOptions { UpdateTargetId = "ViewEditPartial", OnSuccess = "enterEditMode(true);" })
            </div>
            <div id="SaveButton" data-bind="css: saveButtonClass">
                @Html.ActionLink("Save", "Save", "ChecklistItem", new { id = "" })
            </div>
            <div data-bind="css: deleteButtonClass">
                @Ajax.ActionLink("Delete", "Delete", "ChecklistItem", new { id = "" }, new AjaxOptions { UpdateTargetId = "ViewEditPartial", OnSuccess = "loadChecklistItems();" }, new { id = "DeleteButton" })
            </div>
            <div data-bind="css: cancelButtonClass">
                @Ajax.ActionLink("Cancel", "CancelEdit", "ChecklistItem", new { id = "" }, new AjaxOptions { UpdateTargetId = "ViewEditPartial", OnSuccess = "leaveEditMode();" }, new { id = "CancelEditButton" })
            </div>
            <div data-bind="css: editButtonClass">

            </div>
        </div>
        <div class="atlas-content-left">
            <table >
                <tr>
                    <td class="container-head-left"></td>
                    <td class="container-head-middle">Checklist Items</td>
                    <td class="container-head-right"></td>
                </tr>
                <tr>
                    <td colspan="3" class="container-body">
                        <div id="ChecklistItemList">
                            <table class="atlas-data-table">
                                <thead>
                                    <tr>
                                        <th>
                                            Description
                                        </th>
                                        <th>
                                            Default On
                                        </th>
                                        <th>
                                            Compulsory
                                        </th>
                                        <th>
                                            Item Type
                                        </th>
                                    </tr>
                                </thead>

                                @foreach (var item in Model.ChecklistItemSummarys)
                                {
                                    <tr>
                                        <td>
                                            @Ajax.ActionLink(item.ChecklistItem, "DisplayChecklistItem", "ChecklistItem", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ViewEditPartial" }, new { id = "ChecklistItemViewLink_" + item.Id})
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.DefaultOn)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.IsSystem)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.FieldItem)
                                        </td>
                                    </tr>
                                }
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="atlas-content-right">
            <div id="ViewEditPartial" style="width: 100%">
            </div>
        </div>            
    </div>
}

我的页面控制器是

public ActionResult Index()
    {

        var checklistItemIndex = new ChecklistItemIndex
        {
            ChecklistItemSummarys = new List<ChecklistItemSummary>
        {
            new ChecklistItemSummary
            {
                ChecklistItem = "Item 1",
                DefaultOn = true,
                FieldItem = true,
               Id =  Guid.NewGuid(),
               IsSystem = true
            },
            new ChecklistItemSummary
                    {
                ChecklistItem = "Item 2",
                DefaultOn = true,
                FieldItem = true,
               Id =  Guid.NewGuid(),
               IsSystem = true
            }
        },
            ToolbarSettings = new Toolbar

            {
                CancelButtonAction = "Cancel/",
                CancelButtonClass = "atlas-navigation-button-active",
                DeleteButtonAction = "Delete",
                DeleteButtonClass = "atlas-navigation-button-active",
                EditButtonAction = "Edit",
                EditButtonClass = "atlas-navigation-button-active",
                NewButtonAction = "New",
                NewButtonClass = "atlas-navigation-button-disabled",
                SaveButtonAction = "Save",
                SaveButtonClass = "atlas-navigation-button-active"

            }
        };
        return View(checklistItemIndex);
    }

然后，当呈现我的局部视图时，我希望能够将新的css重新应用到相同的按钮上，这就是清单项目的细节。我在局部视图中遵循了相同的概念，应用了绑定，但只得到了错误“JavaScript运行时错误：您不能对同一个元素多次应用绑定”。我理解这可能是为什么，但无法找到解决我的特定问题的最佳方法

我对knockout非常陌生，并且已经阅读了很多文档，但是文档似乎涉及到更简单的概念，因此我发现很难找到正确的解决方案来使用，正如一些人所说的，这不是正确的方法

提前感谢

在重新应用模型之前，请尝试呼叫cleanNode：

ko.cleanNode(document.body);
ko.applyBindings(viewModelToolbar);

根据您的评论更新：

由于您不想使用cleanNode，因此可以使用来自服务器的新数据更新现有视图模型：

var viewModelToolbar =
{
    newButtonClass: ko.observable('@Model.ToolbarSettings.NewButtonClass'),
    newActionClass: ko.observable('@Model.ToolbarSettings.NewButtonAction'),
    editButtonClass: ko.observable('@Model.ToolbarSettings.EditButtonClass'),
    saveButtonClass: ko.observable('@Model.ToolbarSettings.SaveButtonClass'),
    deleteButtonClass: ko.observable('@Model.ToolbarSettings.DeleteButtonClass'),
    cancelButtonClass: ko.observable('@Model.ToolbarSettings.CancelButtonClass'),
};

var existingVm = ko.dataFor(document.body);

if (existingVm)
    {
    existingVm.newButtonClass(viewModelToolbar.newButtonClass);
    existingVm.newActionClass(viewModelToolbar.newActionClass);
    existingVm.editButtonClass(viewModelToolbar.editButtonClass);
    existingVm.saveButtonClass(viewModelToolbar.saveButtonClass);
    existingVm.deleteButtonClass(viewModelToolbar.deleteButtonClass);
    existingVm.cancelButtonClass(viewModelToolbar.cancelButtonClass);
    }
else
    ko.applyBindings(viewModelToolbar);

---

或者，您可以使用插件。

这是不推荐使用的东西之一，因为它实际上是knockouts内部Api的一部分，或者我读到的。因为我不知道该相信谁。我个人认为，我不认为它是内部的，就像我不认为KO.解包一样，这两个文件都没有正式记录，打开包装对于公众使用也是至关重要的。无论如何，请看我的更新。谢谢你，公平地说，我已经按照你原来的帖子实现了CleanNode，它工作得非常出色，速度似乎没有问题，我认为它比其他选择更干净。并不是我不想使用它，只是我对击倒很陌生，这是我尝试使用它做的第一件事，我不想使用其他人认为“不正确”的东西，因为互联网上充斥着各种观点，很难判断谁是正确的。如果你对一个干净的单线解决方案感兴趣，我可以使用ko.mapping插件为您提供一个。

var viewModelToolbar =
{
    newButtonClass: ko.observable('@Model.ToolbarSettings.NewButtonClass'),
    newActionClass: ko.observable('@Model.ToolbarSettings.NewButtonAction'),
    editButtonClass: ko.observable('@Model.ToolbarSettings.EditButtonClass'),
    saveButtonClass: ko.observable('@Model.ToolbarSettings.SaveButtonClass'),
    deleteButtonClass: ko.observable('@Model.ToolbarSettings.DeleteButtonClass'),
    cancelButtonClass: ko.observable('@Model.ToolbarSettings.CancelButtonClass'),
};

var existingVm = ko.dataFor(document.body);

if (existingVm)
    {
    existingVm.newButtonClass(viewModelToolbar.newButtonClass);
    existingVm.newActionClass(viewModelToolbar.newActionClass);
    existingVm.editButtonClass(viewModelToolbar.editButtonClass);
    existingVm.saveButtonClass(viewModelToolbar.saveButtonClass);
    existingVm.deleteButtonClass(viewModelToolbar.deleteButtonClass);
    existingVm.cancelButtonClass(viewModelToolbar.cancelButtonClass);
    }
else
    ko.applyBindings(viewModelToolbar);