Question

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

<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>

当用户点击＆＃34;查看＆＃34;在网格上的按钮，它执行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]);

以上是创建网格并对其应用knockout的代码。这一切都是在模态的第一次加载时返回的部分视图html。如果我关闭模态然后重新打开相同的局部视图，它就会爆炸，因为绑定已经存在。我尝试了ko.cleanNode，destroy，remove等。有人可以请教我如何在这种情况下正确重新绑定吗？

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

Answer 1

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

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

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

这将使用id＆＃34; inpartialview＆＃34;绑定元素。查看模型，如果需要可以很容易地隔离替换，最终消除了进行任何绑定清理工作的需要。

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

1 个答案: