1

我在使用“基本标签”时遇到问题。我在 MVC 的视图中呈现选项卡，然后在三个不同的部分视图中拥有一堆 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>
4

1 回答 1

2

需要注意的是只使用一个参数多次调用 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-10T18:35:53.910 回答