使用knockout.js 渲染局部視圖

Question

我需要根據用戶在 Asp.Net MVC4 中的選擇加載選項卡。 每個選項卡元素都屬於一個局部視圖。 每個局部視圖都有自己的 Knockout.js 綁定。

單擊每個選項卡時，需要在先前選擇的選項卡下方呈現部分視圖。

這是一個代碼片段

<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模板呈現部分視圖時，我才會遇到此沖突。

任何幫助將不勝感激。

提前致謝，Alphacoder

Answer 1

我做了類似的事情，將 NavigationViewModel 綁定到頁面並知道要顯示什么視圖並將其存儲在可觀察變量中。 然后在每個選項卡周圍，使用可見測試來查看是否應根據該變量顯示它。

然后你想設置頁面以允許你將不同的視圖模型綁定到不同的局部視圖，你可以使用以下方法進行設置：

// 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 時有效。