问题描述
我需要根据Asp.Net MVC4中的用户选择来加载选项卡.每个选项卡元素都与一个局部视图有关.每个局部视图都有其自己的kickout.js绑定.
I have a requirement to load tabs based on user selection in Asp.Net MVC4.Each tab element pertains to a partial view. Each partial view has its own knockout.js bindings.
在单击每个选项卡时,需要在先前选择的选项卡下方呈现局部视图.
On click of each tab, partial view needs to be rendered below the previously selected tab.
这是一个代码段
<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>
这是视图模型的近似实现.
This is the approximate implementation of the view model.
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
模板渲染部分视图时,才出现这种冲突,如上面的 Knockout.js Html Template
子标题所示.
When I do the above steps I am having a conflict with knockout bindings of the main view model where the partial view is rendered, as it has its own knockout bindings. I am getting this conflicts only if I render the partial view using the knockout
template as shown in above Knockout.js Html Template
sub-heading.
任何帮助将不胜感激.
预先感谢,字母编码器
Thanks in advance,Alphacoder
推荐答案
我通过将NavigationViewModel绑定到页面并知道了要显示的视图并将其存储在可观察变量中,从而完成了类似的操作.然后,在每个标签附近,使用可见测试来查看是否应基于该变量.
I've done something similar by having a NavigationViewModel that is bound to the page and knows what view you want to show and stores that in an observable variable. Then around each tab, you use the visible test to see whether it should be shown based on that variable.
然后,您要设置页面以允许您将不同的视图模型绑定到不同的局部视图,并使用以下方法进行设置:
You then want to set the page up to allow you to bind different view models to different partial views, and you set this up using:
// 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);
然后在局部视图中,使用以下代码停止将导航视图模型绑定到该模型:
Then in your partial view, you use this code to stop the navigation view model from being bound to it:
<section data-bind="visible: SelectedView() == 'location'">
<!-- ko stopBinding: true -->
<div id="map"></div>
<!-- /ko -->
</section>
并使用以下方法将您的其他模型绑定到此部分:
And bind your other model to this section using:
ko.applyBindings(mapViewModel, $('#map')[0]);
当然,我还没有使用模板来完成此操作,但是当使用纯HTML和js进行剔除时,该方法可以正常工作.
Granted, I haven't done this with a template, but that works when using plain html and js with knockout.
这篇关于使用基因敲除.js渲染部分视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!