ASP.NET MVC Partial View binding

[Nicholas Lydon]

Let's say I have a page with the view model already applied and then I make an ajax request and get some HTML with bindings (i.e. a partial view) and insert it into the page.
Do I need to call applyBindings() with that inserted DOM element as a parameter to tie it to the view model?

[Daryl Myrick]

Yes, you will need to apply bindings to just the new elements.

Something like...

var element = document.getElementById("containerForNewElements");
ko.applyBindings(myViewModel, element);

If you don't have a container for the new elements then you will need
to come up with a way to target just the new elements that need the
knockout bindings applied.

For instance, you could add a class to the elements that have data-
bind attributes and then use jQuery to select those elements and apply
bindings to them... and then remove the class if you may later add
more elements that will need binding.

Something like this...

$('.koBind').each(function (index, element) {
ko.applyBindings(myViewModel, element);
});
$('.koBind').removeClass('koBind');


You probably already know this... but you cannot just target all
elements that have data-bind attributes since you have already bound
some of them.

[Nicholas Lydon]

Thanks for the response!
Should I keep all the ko logic out of the pages that are ajax'ed in? For instance would it be OK to have script on the ajax'ed page that applied a view-model to those new elements? Or should I keep all the control in the page that's actually getting and inserting those elements?

[Daryl Myrick]

To me... this is kind of an architectural question... meaning is there
a best way... and the truth is there are many ways to do it... all
with pros and cons...

I'm not sure if I am qualified to answer that but I'll try
anyway... :P

ASP.NET MVC Partial Views are supposed to just be for taking model
data that it is passed and rendering it. That could be as HTML, JSON,
etc.

So my initial thought would be to try to keep the separation of
concerns as best you can.

Now with that said... at the end of the day you need to accomplish
what your application needs and from what I have seen so far with
ASP.NET MVC... it does a lot of things really well... but then just
kind of leaves you to your own devices when you need to go beyond what
it currently provides.

The integration with KnockoutJs and fully adapting an MVVM approach is
one of those areas... so until it is picked up and better integrated
(which MVC4 including KnockoutJs is definitely a good sign) we will
need to make some concessions from a purest's view point.

I am currently trying to go through some of the same design decisions
that it sounds like you are and have not come up with what I would
consider to be a completely elegant solution.

What I am currently doing is moving my view model javascript to a
separate javascript file and placing it into the /Scripts/
ControllerName/_partialViewName.js file so to try and keep the
javascript code separate but easily located by the similar naming
convention as the in the Views folder.

With that... I've found that I can either eliminate or have a very
limited amount of javascript in what is rendered by the Partial View.
I have not taken on the additional task right now of making it
unobtrusive javascript.

In situations like this... I would normally try to decouple the
javascript in the View's view model from any direct knowledge of any
Partial View's view model... especially if I plan on reusing the
Partial View on multiple Views. If that is not a concern... then I
would not worry about decoupling them... and if you are following an
Agile approach then I would say... develop what you need now... and if
you need to reuse the Partial View later... then refactor it at that
time.

Hope this helps...

[Nicholas Lydon]

I'm a junior developer and this is my first web application, so everything's new to me and I'm still trying to wrap my head around good javascript design. Thanks for the advice, it'll definitely come in handy.