Binding a Knockout MVC Model in Partial Views

Question

I am using Knockout MVC. On my page, I am doing a few Partial View. In each partial view, I pass in a model, i.e. a submodel for main. And I get the error "Uncaught Error: you cannot apply bindings several times to the same element." Here is the code.

main view

@using PerpetuumSoft.Knockout @model UserPageViewModel @{ var ko = Html.CreateKnockoutContext(); } <div> @Html.Partial("Controls/_PagePanel", Model.PanelViewModel) </div> @ko.Apply(Model) 

Partial view of the page bar

 @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) 

Advanced search Partial view

 @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) 

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; } } 

I understand that the problem is in @ ko.Apply () line, but I don’t understand why. Is there any way to solve the problem?

Answer 1

The problem is resolved. When rendering a partial view, you must use @ ko.With ().

 <div> @using (var subModel = ko.With(m => m.PanelViewModel)) { @Html.Partial("Controls/_PagePanel", Model.PanelViewModel) } </div> 

@ ko.With () indicates a partial view of which submodel properties should be bound. And then you need to delete everything @ ko.Apply (Model), except for one in the root page (main view).