Home/ Questions/Q 8302061
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T17:11:30+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Description

    This is not about Knockout, it’s about JavaScript in general.
    Your Testcode works because you have defined the viewModel outside of $(document).ready

    This is a other scope.

    Compare theese to jsFiddles

    Sample

    This does not work

    $(document).ready(function () {
    var viewModel = {
        someThing : "Test"
    };
});

$(document).ready(function () {  
    alert(viewModel.someThing);
});

    This will work

    var viewModel;
$(document).ready(function () {
    viewModel = {
        someThing : "Test"
    };
});

$(document).ready(function () {   
    alert(viewModel.someThing);
});

    More Information

    ​

    • 0