我正在使用Knockout MVC。在我的页面中,我呈现了几个部分视图。在每个局部视图中,我传递一个模型,即main的子模型。我收到一个错误"未捕获错误:不能多次将绑定应用于同一个元素。"这是一些代码。
主视图
@using PerpetuumSoft.Knockout
@model UserPageViewModel
@{
var ko = Html.CreateKnockoutContext();
}
<div>
@Html.Partial("Controls/_PagePanel", Model.PanelViewModel)
</div>
@ko.Apply(Model)
页面面板局部视图
@using PerpetuumSoft.Knockout
@model PagePanelViewModel
@{
var ko = Html.CreateKnockoutContext();
}
<div>
<div>
@foreach (var button in Model.Actions)
{
@ko.Html.Button(button.Id, button.ActionName, button.ControllerName, null, button.HtmlAttributes)
}
<a id="searchGridButton" class="btn" data-toggle="collapse" data-parent="#searchPanel" href="#accordionfilterContainer">Advanced search</a>
</div>
@Html.Partial("Controls/_AdvancedSearch", Model.AdvancedSearch)
</div>
@ko.Apply(Model)
高级搜索部分视图
@using PerpetuumSoft.Knockout
@model AdvancedSearchViewModel
@{
var ko = Html.CreateKnockoutContext();
}
<div id="accordionfilterContainer" class="accordion-body collapse">
@using (ko.Html.Form(Model.ActionName, Model.ControllerName, null, new { id = "searchForm" }))
{
<div id="filterContainer" class="accordion-inner">
@using (var items = ko.Foreach(m => m.SearchCriteria))
{
<div style="display: inline-block">
<span @items.Bind.Text(m => m.Id)></span>
<br />
@items.Html.TextBox(m => m.Value, null)
</div>
}
<div style="display: inline-block">
<button type="submit" class = "@Model.HtmlAttributes">Apply filters</button>
</div>
</div>
}
</div>
@ko.Apply(Model)
型号
public class UserPageViewModel
{
public List<User> Data { get; set; }
public PagePanelViewModel PanelViewModel { get; set; }
}
public class PagePanelViewModel
{
public IEnumerable<ButtonViewModel> FilterButtons { get; set; }
public AdvancedSearchViewModel AdvancedSearch { get; set; }
public IEnumerable<ButtonViewModel> Actions { get; set; }
}
public class AdvancedSearchViewModel
{
public IList<TextBoxViewModel> SearchCriteria { get; set; }
}
我知道问题出在@ko.Apply()字符串中,但我不明白为什么。有什么办法解决这个问题吗?
问题解决了。渲染部分视图时,有必要使用@ko.Wise()。
<div>
@using (var subModel = ko.With(m => m.PanelViewModel))
{
@Html.Partial("Controls/_PagePanel", Model.PanelViewModel)
}
</div>
@ko.With()指定子模型的哪些属性需要绑定的部分视图。然后需要删除除根页面(主视图)中的一个之外的所有@ko.Apply(Model)。