multiple bindings (add bindings to Partialview within Parent view that was already bounded)

Question

How to apply bindings to partialview within parent view that was already bounded? Or find workaround on how to overcome the need of the above...

I am using asp.net and I have main View that is doing staff with knockout ViewModelA. Page has many divs (tabs), user is able to navigate via those tabs and all the time there is only one ViewModel (ViewModelA). ViewModelA properties are populated within div1,div2,div3 and div4. The simply html structure is like this:

<div id="mycontainer">
    <div id="tab1">..<populate viewmodela properties>..</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
     etc.
</div>


 ko.applyBindings(ViewModelA);

It works fine, but now the requirements has changed: I have to insert partial view into one of those divs/tabs (inside #tab2). This partial view loads its own knockout models using the following command:

 ko.applyBindings(partialViewModel, document.getElementById("partial_view_container"));

In this case binding happens twice (when first time calling ViewModelA binding, and second time when inserting partialview with its own binding staff). And this gives an error: "You cannot apply bindings multiple times to the same element".

How can I fix this? I know that for applyBindings there is a second paramater that is the container within which bindings should be done, but in my case, I do not have one container for ViewModelA, because ViewModelA is populated withing different divs (tabs).

At the start of your app do you know all the tabs that you are going to use? i mean do your tabs pre-defined? — ebram khalil, Nov 13 '13 at 12:25
Take a look at this article about binding multiple view models in a single page: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html — Artem, Nov 13 '13 at 12:55

score 0 · Answer 1 · edited May 23 '17 at 12:12

I have been in the same problem before..

I think you need to structure your model to be divided into four models(according to four tabs). But your models are actually one so you 'll need to have them as one Model(here comes tricky part).

What we are looking into now is knockout multiple view models on one page ??

In my app i declared a Master/Big/Parent/Container ViewModel that all it's used for is to have property with each view model i have in my page(remember four models).

So now each part/tab of my page has it's own ViewModel(could be the same but with different data/values) and i have MasterViewModel that hold these ViewModels in one(4 * 1).

To HTML part, to make your html handling is easier i highly suggest to take advatage of with binding.

Check John Papa answer in SO

Update
Example on your JS file

function AppMasterViewModel() {
    var self = this;
    self.ViewModelTabOne = new ViewModelTabOne();
    self.ViewModelTabTwo = new ViewModelTabTwo();
    self.ViewModelTabThree = new ViewModelTabThree();
}

For HTML

<div id="mycontainer">
    <!-- #mycontainer related to AppMasterViewModel-->
    <div id="tab1" data-bind="with: ViewModelTabOne">
        <!-- #tab1 related to ViewModelTabOne-->
    </div>
    <div id="tab2" data-bind="with: ViewModelTabTwo">
        <!-- #tab1 related to ViewModelTabTwo-->
    </div>
    <div id="tab3" data-bind="with: ViewModelTabThree">
        <!-- #tab1 related to ViewModelTabThree-->
    </div>
</div>

What if ViewModelTabTwo should be defined outside AppMasterViewModel? The problem is that PartialView that is renderded inside #tab2 is a component that works by it self (without AppMasterViewModel) and it should work like this, because it is rendered also on other forms. So there is ViewModelTabTwo that is defined outside AppMasterViewModel... — renathy, Nov 13 '13 at 13:37
sorry i didn't get you, but my way does noes meet your requirement, please look at Artem comment above, very helpful — ebram khalil, Nov 13 '13 at 13:51

multiple bindings (add bindings to Partialview within Parent view that was already bounded)

1 Answers1