knockout js jquery Load

Question

Hi I am trying to load knockout js html pages dynamically from jQuery Load but getting

You cannot apply bindings multiple times to the same element.

How do I load knockout js pages with jqyuery load.

What I am trying is to create a navigation framework by loading url page (Views/home.html or Views/login.html)into when ever user click on link.

So I can't load all knocokout viewmodel on fist load

I am trying to create Navigation model to load/refresh only body of the page not the full page.

For example

 <ul class="nav navbar-nav" id="nav">
            <li>
                <a href="Views/home.html" class="active">Home</a>
            </li>
            <li>
                <a href="Views/login.html">Login</a>
            </li>
            <li>
                <a href="Views/Contactus.html">Contactus</a>
            </li>

        </ul>

<div id="body"></div>

if Home click

  $("#body").load("Views/home.html");

if Login click

  $("#body").load("Views/login.html");

Home.html

 var homeViewModel= function() {
            this.firstName = ko.observable();
            this.lastName = ko.observable();          
        };

        ko.applyBindings(new homeViewModel());

Login.html

  var loginViewModel= function () {
        this.username = ko.observable("test");
    };
    ko.applyBindings(new loginViewModel())

possible duplicate of [KnockoutJS: ko.applyBindings to partial view?](http://stackoverflow.com/questions/7342814/knockoutjs-ko-applybindings-to-partial-view) - you can pass in the element as the second parameter — PW Kad, Jan 26 '14 at 23:18
What I am trying is to create a navigation model -- loading
when ever user click on link. So I can't load all knocokout viewmodel on fist load — ineffable p, Jan 26 '14 at 23:29
read the second part of what I commented - you need to pass a second parameter to ko.applyBindings, just like they talk about in that question, that applies the bindings only to that element and not to the root. — PW Kad, Jan 26 '14 at 23:30
Hi PW Kad , I have seen this and tried but the problem is for me div id is body always, can't change — ineffable p, Jan 26 '14 at 23:34
Then name the id or class dynamically or use a custom binding — PW Kad, Jan 27 '14 at 01:21
I'm not totally convinced that `jQuery.load()` is necessarily the solution to your problem, looking at what you are trying to achieve here could easily be done with http://knockoutjs.com/documentation/template-binding.html. I'm happy to supply an example with code if this fits your requirements. — Michael Papworth, Jan 27 '14 at 09:26
Hi, I am using jquery.load() for common navigation to load pages, irrespective of page uses knocout js or not. to be more clear , my porject has couple of pages has knocout js and most of pages without knockout js. So I want to load page with jquery.load — ineffable p, Jan 27 '14 at 10:17

score 2 · Accepted Answer · answered Jan 27 '14 at 11:19

I have attached and removed node but the dependency is always name of viewmodel must be viewModel

  ko.cleanNode($("#body")[0]);
                $("#body").load(url, function() {
                    ko.applyBindings(new viewModel(), $("#body")[0]);
                });

score 1 · Answer 2 · answered Jan 28 '14 at 05:10

You may want to look at Pager.js, which extends knockout.js for page history and partial loading.

Load all your javascript in your main page. Keep the partials (Views/home.html, Views/login.html) containing only html with binding declarations. You don't need to explicitly call applyBindings when switching partial, Pager.js does that for you (with proper cleanup for all bindings on previous partial).

knockout js jquery Load

2 Answers2