Javascript function in Partial view can't access Javascript variable defined in page (MVC 3)
===

I am trying to learn to use Knockoutjs but I am facing a problem

this is the scenario:

I have a page where I define a Knockoutjs viewModel as follow

    $(document).ready(function () {
        var viewModel = {
            selectedColumns: ko.observableArray()
        };
        ko.applyBindings(viewModel);
    });

Now with an Ajax request I add to the page a checkbox which I want to bind to the viewModel 

    <input type='checkbox' id='someId' data-bind='attr: { value: 'someValue' }, checked: $root.selectedColumns'>
    
     $(document).ready(function() {
                     ko.applyBindings(viewModel, document.getElementById(someId));
                });

but I always get 

Error: ReferenceError: viewModel is not defined
Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

I've created a test page where everything is on one page and it works 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
        <script src="../../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
        <script type="text/javascript">
            var count = 0;
            var viewModel = {
                selectedPeople: ko.observableArray()
            };
            
            $(document).ready(function () {
                ko.applyBindings(viewModel);
            });
    
            function AddAnotherCheckbox(){
                
                var id = "checkbox" + count;
    
                var checknox = count + "   <input type='checkbox' id='" + id + "' data-bind='attr: { value: \"" + count + "\" }, checked: $root.selectedPeople'><br/>";
                
                $("#container").append(checknox);
                count++;
    
                 $(document).ready(function() {
                     ko.applyBindings(viewModel, document.getElementById(id));
                });
            }
        </script>
    </head>
        <body>
            
            <input type="button" onclick="AddAnotherCheckbox()"/>
            
            <div id="container"></div>
            <br/>
            <br/>
            <br/>
            <span data-bind="text: selectedPeople"></span> 
        </body>
    </html>

But I  can't make it working using partial view

Could you explain to me what's the problem and how can I solve it?

thanks

