Question

我有一个表单，其中包含一个带有网格和几个（引导程序）模态表单的主视图。模态形式非常复杂，需要花费很长时间才能下载。表单上的所有内容当前都绑定到一个淘汰视图模型。该viewmodel包含（除其他外）下拉项的数组和绑定到模态表单元素的可观察属性的子类。

目前，在用户可以与页面进行交互之前，必须先下载整个表单和数据。我想将其分解，以便加载以下列方式流动：

基本表单元素和css
虚拟机已实例化
网格下载数据
grid绑定到vm
用户可以开始互动
最常用的模态形式下载的元素
模态表单绑定到VM
重复6＆amp; 7适用于所有模态表格

在将网格绑定为部分视图后，我已成功下载模态表单，但现在我收到错误消息＆＃34;您无法多次将绑定应用于同一元素。＆＃34 ;有没有办法将我的部分视图按顺序绑定到同一个viewmodel？

这是我的代码，它将基页绑定到vm。请注意，它然后调用loadQuoteModal来加载Quote Modal Form。

$(document).ready(function () {
     var vm = new ClientListViewModel();
     ko.applyBindings(vm, document.getElementById("#baseClient"));
     vm.loadQuoteModal();
});

这是我的虚拟机上的loadQuoteModal。

self.loadQuoteModal = function () {
        var d = $.Deferred();
        var xhr = $.get('/Home/QuoteModalForm');
        xhr.done(function (partialViewResult) {
            $("#LoadQuote").html(partialViewResult);
            ko.applyBindings(this, document.getElementById("#quoteDiv"));
            self.quoteLoaded = true;
        });
        return d;
    }

这是我的页面。

<div id="baseClient">
    <div class="col-md-12" id="clientHeader">
        //Many elements not relevent
    </div>

    <div class="col-md-12" id="clientDiv">
        //Many elements not relevent
    </div>
</div>

<div id="quoteDiv">
</div>

Answer 1

我建议您保留单个ViewModel，但不要等到所有数据都加载完毕。您正在执行多个ko.applyBindings的地方，您可以将其设置为空ko.observables，这些只有在数据/子模型设置在其中时才可见。这些子模型的数据可以在页面加载后异步加载和设置。

Answer 2

不确定这是否是您要查找的内容，但您可以将不同的ViewModel绑定到页面的不同区域。像这样：

<div id="customerPanel"></div>
<div id="productsPanel"></div>

ko.applyBindings(new CustomerViewModel(), document.getElementById("customerPanel"));

ko.applyBindings(new ProductsViewModel(), document.getElementById("productsPanel"));

等等......

Answer 3

Ryan Niemeyer在good article讨论了这个问题。他建议做的是创建这个简单的自定义绑定：

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};

ko.virtualElements.allowedBindings.stopBinding = true;

然后在你的标记中，你只需标记你不想第一次绑定的元素：

<div id="baseClient">
    <!-- ko stopBinding: true -->
    <div class="col-md-12" id="clientHeader">
        //Many elements not relevent
    </div>
    <!-- /ko -->
    <!-- ko stopBinding: true -->
    <div class="col-md-12" id="clientDiv">
        //Many elements not relevent
    </div>
    <!-- /ko -->
</div>

在你的ajax回调中，你就像以前一样为特定的DOM元素运行applyBindings。

Answer 4

查看this fiddle。

    function addDynamicContent() {
        $("#main").append("<div id='dynamic' data-bind='text: fullName'></div>");
        ko.applyBindings(viewModel, $("#dynamic")[0]);
    }

您可以使用它来创建多个动态加载但仍绑定到一个视图模型的部分视图。

将部分视图顺序绑定到knockout viewmodel

4 个答案: