使用 knockout.js 渲染局部视图答案

【问题标题】：Render partial view using knockout.js使用 knockout.js 渲染局部视图
【发布时间】：2013-01-13 21:18:02
【问题描述】：

我需要根据用户在 Asp.Net MVC4 中的选择来加载选项卡。每个选项卡元素都属于一个局部视图。每个局部视图都有自己的 knockout.js 绑定。

点击每个选项卡时，需要在之前选择的选项卡下方呈现部分视图。

这是一个代码sn-p

<div class="row-fluid top-pad-double" id="tabBasedGrowthDiv">
  <ul class="nav nav-pills">
     <li><a href="#tabCustomerInfo" data-toggle="tab" data-bind="click:$root.AddTab">CustomerInfo</a></li>
     <li><a href="#tabPropertyInfo" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo</a></li>
     <li><a href="#tabPropertyInfo1" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo1</a></li>   
</ul>
<div class="tab-content pills pill-sections">
    <div data-bind="template: { name: 'tabBasedGrowthTemplate', foreach: $root.tabs}"></div>
    </div>
</div>

Knockout.js Html 模板

<script type="text/html" id="tabBasedGrowthTemplate">
    <div class="tab-pane" >
        <div class="pill-header clearfix">
            <h3>Some title</h3>
                <div class="pull-right">
                    <a href="#" class="btn btn-mini" data-toggle="button" rel="tooltip" data-title="lock this section here" data-placement="top"><i class="icon-lock"></i></a>
                    <a href="#" class="btn btn-mini" rel="tooltip" data-title="close this section" data-placement="left"><i class="icon-remove"></i></a>
                </div>
        </div>
        <div class="pill-content" data-bind="attr:{id: $data.id}">

            @Html.Partial("tab based partial view name")

        </div>
    </div>
</script>

这是视图模型的大致实现。

function TabBasedGrowthViewModel() {
        var self = this;

        self.tabs = ko.observableArray([TabViewModel]);
        self.AddTab = function (){}
}

敲除绑定

<script type="text/javascript">
    $(document).ready(function () {
        ko.applyBindings(new TabBasedGrowthViewModel(), $("#tabBasedGrowthDiv").get(0));
        });
</script>

当我执行上述步骤时，我与渲染部分视图的主视图模型的敲除绑定发生冲突，因为它有自己的敲除绑定。只有当我使用上面的 Knockout.js Html Template 子标题所示的 knockout 模板渲染部分视图时，我才会遇到这种冲突。

任何帮助将不胜感激。

提前致谢，阿尔法编码器

【问题讨论】：

您是否仅在单击选项卡（并调用 AddTab）时收到错误？您是否再次为添加的选项卡调用 applyBindings ？如果是这样，请确保您只绑定到添加的选项卡元素。否则，您也许可以调用 ko.applyBindingToNode。
页面一加载就出现错误。部分视图有自己的应用绑定。

标签： c# asp.net-mvc knockout.js

【解决方案1】：

我通过将 NavigationViewModel 绑定到页面并知道要显示的视图并将其存储在可观察变量中来完成类似的操作。然后在每个选项卡周围，使用visible test 来查看是否应根据该变量显示它。

然后您希望设置页面以允许您将不同的视图模型绑定到不同的局部视图，您可以使用以下方法进行设置：

// This lets us stop the view model from binding to areas of the page,
// allowing us to bind different objects to parts of the page
ko.bindingHandlers.stopBinding = {
    init: function ()
    {
        return { controlsDescendantBindings: true };
    }
};

ko.virtualElements.allowedBindings.stopBinding = true;
ko.applyBindings(navigationViewModel);

然后在您的局部视图中，您使用此代码来阻止导航视图模型与其绑定：

    <section data-bind="visible: SelectedView() == 'location'">
        <!-- ko stopBinding: true -->        
        <div id="map"></div>
        <!-- /ko -->
    </section>

并使用以下方法将您的其他模型绑定到此部分：

        ko.applyBindings(mapViewModel, $('#map')[0]);

当然，我还没有使用模板完成此操作，但在使用纯 html 和带有敲除的 js 时有效。

【讨论】：