CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
ineffable p
ineffable p

Reputation: 1189

knockout js jquery Load

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

Upvotes: 2

Views: 1483

Answers (2)

user1375096
user1375096

Reputation:

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

Upvotes: 1

ineffable p
ineffable p

Reputation: 1189

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

Upvotes: 2

Related Questions