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

回答

相关问题