淘汰赛绑定不会清除/删除答案

【问题标题】：Knockout bindings won't clear/remove淘汰赛绑定不会清除/删除
【发布时间】：2016-03-15 03:25:30
【问题描述】：

我在 MVC 视图上定义了一个引导模式，见下文。

<div id="myOpenRequestModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="overflow-y: initial !important;">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">TSR Preview Summary</h4>
        </div>
        <div class="modal-body" style="max-height:800px;overflow-y:auto;">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning btn-override" style="display:none;">Override</button>
            <button type="button" class="btn btn-warning btn-override-commit" style="display:none;">Commit Override</button>
            <button type="button" class="btn btn-warning btn-override-cancel" style="display:none;">Cancel Override</button>
            <button type="button" class="btn btn-info tsrcancel" data-dismiss="modal">Cancel Request</button>
            <button type="button" class="btn btn-info close-request" data-dismiss="modal">Close Request</button>
            <button type="button" class="btn btn-default print-button">Print</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
        </div>
    </div>
</div>

当用户单击网格上的“视图”按钮时，它会执行 Ajax 调用来渲染部分视图的 html，将其返回并通过 jquery 填充模态的主体，例如 $('modalbody').html(htmlreturned);。在这个阶段，在部分视图上渲染敲除，并且绑定被调用一次，见下文...

    <div class="row">
    <div class="col-md-2 left-padding-row">
        Note(s):
    </div>
    <br />
    <div class="col-md-10 left-padding-row">
        <table class="table notes" style="margin-bottom:0 !important;">
            <tbody id="NotesGrid" data-bind="foreach:{data: Notes, as: 'note'}">
                <tr data-bind="attr: { index: $index }">
                    <td width="70%">
                        <textarea data-bind="value: note.Value, disable: note.Disabled, attr: { name: 'Notes[' + $index() + '].Value'}" style="width:100%;height:100%;resize: none;"></textarea>
                    </td>
                    <td width="25%">
                        <input class="btnRemove" type="button" data-bind="click: $parent.removeNote, visible: note.IsNew" value="Remove" />
                    </td>
                    <td width="5%">
                        <input class="hdnNoteID" type="hidden" data-bind="value: note.NoteID" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


var _viewModel = new ViewModel();

function note(index) {
    this.NoteID = ko.observable('');
    this.Value = ko.observable('');
    this.Index = ko.observable(index);
    this.IsNew = ko.observable(true);
    this.ShowID = ko.observable(false);
    this.Disabled = ko.observable(false);
    return this;
};

function ViewModel() {
    var self = this;

    self.Notes = ko.observableArray(convertJSONToKoObservableObject());

    //Ko Functions
    self.addNote = function () {
        var index = $('#NotesGrid tr:last').attr('index');
        self.Notes.push(new note(index + 1));
    }

    self.removeNote = function (row) {
        self.Notes.remove(row);
    }
}

//FUNCTION
function convertJSONToKoObservableObject() {
    var json = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Submission.Notes))');
    var ret = [];
    var index = 0;
    $.each(json, function (i, obj) {
        var newOBJ = new note(index);
        newOBJ.NoteID = ko.observable(obj["NoteID"]);
        newOBJ.Value = ko.observable(obj["Value"]);
        newOBJ.Index = ko.observable(index);
        newOBJ.IsNew = ko.observable(false);
        newOBJ.Disabled = ko.observable(true);
        newOBJ.ShowID = ko.observable(false);
        ret.push(newOBJ);
        index++;
    });

    return ret;
}

//BIND UP! *UPDATED*
ko.applyBindings(_viewModel, $('.notes')[0]);

以上是创建网格并对其应用剔除的代码。这一切都适用于第一次加载带有返回的部分视图 html 的模式。如果我关闭模式然后重新打开相同的局部视图，它会因为绑定已经存在而被炸毁。我试过ko.cleanNode、destroy、remove等。有人可以告诉我如何在这种情况下正确重新绑定吗？

编辑：为澄清起见，1 个包含模态标记的 MVC 视图和 1 个用于渲染模态体的 MVC 部分视图。淘汰代码存在于局部视图中。

【问题讨论】：

您是否尝试过显式绑定到局部视图中的元素 .. 比如 ko.applyBindings(_viewModel,$("#inpartialview")[0]); ?
我没有尝试过，但我确实尝试将 clearNode 用于单个元素，但在解除绑定时没有运气。我还使用 ko.dataFor 进行了一些检查，以查看事情是否解除绑定，它表明无论我做什么，第一次加载的绑定永远不会消失，直到我进行总页面刷新。 (f5)
如果我完全按照您的操作.. 那就是.. 当用户单击您正在使用 AJAX 每次填充 modal-body 的内容时来自服务器的部分视图的结果，通过将绑定本地化到部分视图中的元素，您可以解决您的问题。试图在这里演示我的想法：jsfiddle.net/b2chwy87/2
你把它钉在了我正在做的事情的头上。我会根据您的建议试一试，并在测试后回来。
好吧，我对这个想法进行了编辑，它似乎产生了效果。我认为我的问题是让绑定适用于模型的所有部分。您可以看到我尝试使用“notes”类标签，但按钮不再执行任何操作。这对我来说是全新的，所以我认为我错过了一些东西。然而，这种方法确实消除了多重绑定错误，这是向前迈出的一步......我希望

标签： jquery asp.net-mvc knockout.js

【解决方案1】：

问题的主要来源是通过 AJAX 加载的局部视图中的 KO 绑定定义将视图模型全局绑定到容器。

这里的一个很好的解决方案（即使您不希望重新加载局部视图）是使用此语法将绑定本地化到局部视图中的容器元素

ko.applyBindings(_viewModel,$("#inpartialview")[0]);

这会将 id 为“inpartialview”的元素绑定到视图模型，并且在需要时很容易隔离替换，最终消除了进行任何绑定清理工作的需要。

【讨论】：