Twitter Bootstrap導航標籤與KnockoutJS衝突

我遇到問題。我在MVC中的視圖中呈現選項卡，然後在三個不同的局部視圖中有一堆KnockoutJS代碼。Twitter Bootstrap導航標籤與KnockoutJS衝突

我的問題是Knockout與其他Knockout代碼衝突，因爲每個Partial View都創建一個MVVM並應用綁定。

有沒有什麼辦法可以跳過呈現DIV（帶有部分視圖），直到按下相關標籤？

這裏是我經常查看代碼：

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#attributes">Attributes</a></li> 
    <li><a href="#interestgroups">Interest groups</a></li> 
    <li><a href="#categories">Categories</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="attributes" class="tab-pane active"> 
     @Html.Partial("_AttributesPartial") 
    </div> 
    <div id="interestgroups" class="tab-pane"> 
     @Html.Partial("_InterestGroupsPartial") 
    </div> 
    <div id="categories" class="tab-pane"> 
     @Html.Partial("_InterestGroupCategoriesPartial") 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#myTab a:first').tab('show'); 
    }); 

    $('#myTab a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
    }); 
</script>

來源

2012-10-10 Gaui

我們還需要看到您的KO代碼，因爲這是問題所在。你是否將所有的腳本保存在自己的視圖中？另外，不同的部分是爲了彼此交互？換句話說，改變一個標籤會影響另一個標籤嗎？ –

問題是我在每個部分視圖中都有KO代碼，每個部分都有ko.applyBindings（）。這是相互矛盾的，因爲當我運行視圖（上面的代碼）時，它呈現所有事情。我想按需求呈現標籤中的內容，所以當我按下「屬性」時_AttributesPartial已加載，但沒有其他部分視圖。所以當我點擊「興趣組」選項卡_InterestGroupsPartial已呈現，但沒有其他部分視圖。明白了嗎？所以，而不是$（this）.tab（'show'）我需要這樣的：$（this）.tab（'render'）; – Gaui

東西要留意將調用ko.applyBindings不止一次只用一個參數。例如，如果你在一個頁面上有多個視圖模型（我從你的問題推斷出來），那麼你需要通過傳入容器元素作爲第二個參數來限制它。

根據你的評論，如果你想懶惰加載的東西，你只需要聽'顯示'的事件。

（這是僞代碼，你就必須在細節上填寫）

$('#attributes').on('shown', function (e) { 
    initKOView(e.target); // some logic to determine which viewModel to bind to. 
}) 

function initKOView(target) { 
    $(target).load('controller/_RenderPartial?path=' + target, function(data) { 
     $(this).html(data); 
     // Once the data comes back, apply your bindings and make sure to scope it. 
     ko.applyBindings(viewModels[target], this); 
    }) 
}

如這裏討論的，是不是一個真正的辦法目前拆毀成套綁定的 - 所以你還是會希望範圍您的視圖模型。

https://github.com/SteveSanderson/knockout/issues/41#issuecomment-749171

然後在你的控制器，你要添加PartialViewResult

public PartialViewResult _RenderPartial(string path) 
{ 
    return PartialView(path); 
}

當然，你可以爲每一個太獨立的控制器動作，並跳過參數加載。此外，您還需要將所有@Html.Partial()內容都排除在主視圖之外。

來源

2012-10-10 18:35:53

如果我沒有更多的代碼啓動，這將工作。像getJSON AJAX調用一樣。 – Gaui

@Gaui，用建議更新了我的回答。 –

這將工作，非常好，感謝所有的幫助！ – Gaui

Twitter Bootstrap導航標籤與KnockoutJS衝突

回答

相關問題