Second applyBindings doesn't fire

Question

Possible Duplicate:
KnockoutJS: ko.applyBindings to partial view?

I use knockout with jQuery. As result of the basic example below, the text "Planet Earth" is displayed fine (so knockout added properly and works!), but "Planet2 Earth2" is not displayed. Also, alert('alert2'); is fired, but alert('alert3'); is not. Could anybody explain me why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="Scripts/knockout-2.2.1.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        alert("alert1");

        var viewModel = {
            firstName: ko.observable("Planet"),
            lastName: ko.observable("Earth")
        };
        viewModel.fullName = ko.dependentObservable(function () {
            return viewModel.firstName() + " " + viewModel.lastName();
        });

        alert("alert2");
        ko.applyBindings(viewModel);

        alert('alert3');


        var viewModel2 = {
            firstName2: ko.observable("Planet2"),
            lastName2: ko.observable("Earth2")
        };
        viewModel2.fullName2 = ko.dependentObservable(function () {
            return viewModel2.firstName2() + " " + viewModel2.lastName2();
        });

        ko.applyBindings(viewModel2);
    });
</script>
</head>
<body>

<div style="border:1px solid red;">   
<p>First name: <input data-bind='value: firstName' /></p> 
<p>Last name: <input data-bind='value: lastName' /></p> 
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

<div style="border:1px solid green;">   
<p>First name: <input data-bind='value: firstName2' /></p> 
<p>Last name: <input data-bind='value: lastName2' /></p> 
<h2>Hello, <span data-bind='text: fullName2'> </span>!</h2>  
</div>

</body>
</html>

[This question](http://stackoverflow.com/questions/7342814/knockoutjs-ko-applybindings-to-partial-view) may help? — Jeroen, Jan 18 '13 at 11:38
Thanks for asking a question, and sharing your answer! I'll mark it as a duplicate as well, making it even more convenient for others to find the more detailed version easily if they land here. — Jeroen, Jan 18 '13 at 11:50

score 2 · Accepted Answer · answered Jan 18 '13 at 11:47

To make it work you have to modify 4 lines:

to apply ids:

<div id="one" style="border:1px solid red;">

and

<div id="two" style="border:1px solid green;">

and use the second parameter for applyBindings:

ko.applyBindings(viewModel,document.getElementById("one"));

and

ko.applyBindings(viewModel2,document.getElementById("two"));

Second applyBindings doesn't fire

1 Answers1