Uncaught ReferenceError: Unable to process binding "foreach: function (){return Educations }"

Uncaught ReferenceError: Unable to process binding "foreach: function (){return WorkExperience }"

I couldn't figure out why the binding is failing.

i have the following two tables one for Education and other for Work Experience, They give the error when i'm trying to bind the both table in one view, If i remove the binding (JS + HTML code) it works fine

HTML:

<div id=divtable1 class="widget widget-simple widget-table">
   <table id="Table1" class="table table-striped table-content table-condensed boo-table table-hover">
      <thead>
         <tr id="Tr1" class="filter">
            <th>University<span class="required">*</span></th>
            <th>Location <span class="required">*</span></th>
            <th></th>
         </tr>
      </thead>
      <tbody data-bind='foreach: Educations'>
         <tr>
            <td><input type="text" class='span11 required' data-bind="value: SchoolName" /></td>
            <td><input type="text" class='span11 required' data-bind="value: Location" /></td>
            <td><a href='#' data-bind='click: $root.removeEducation'>Delete</a></td>
         </tr>
      </tbody>
   </table>
   <button data-bind='click: $root.addEducation' class="btn btn-blue">Add Education</button>
</div>
<div id="divtable2">
   <table id="Table2">
      <thead>
         <tr id="Tr2" class="filter">
            <th>Employer Name<span class="required">*</span></th>
            <th>EmployerAddress <span class="required">*</span></th>
            <th></th>
         </tr>
      </thead>
      <tbody data-bind='foreach: WorkExperience'>
         <tr>
            <td><input type="text" class='span11 required' data-bind="value: EmployerName" /></td>
            <td><input type="text" class='span11 required' data-bind="value: EmployerAddress" /></td>
            <td><a href='#' data-bind='click: $root.removeWorkExperience'>Delete</a></td>
         </tr>
      </tbody>
   </table>
   <button data-bind='click: $root.addWorkExperience' class="btn btn-blue">Add Work Experience</button>
</div>

Java Script:

<script type="text/javascript">
    var Educations = function (educations) {

        var self = this;
        self.Educations = ko.mapping.fromJS(educations);

        self.addEducation = function () {
            self.Educations.push({"SchoolName": ko.observable(""), "Location": ko.observable("")});
        };

        self.removeEducation = function (education) {
            self.Educations.remove(education);
        };
    };

    var viewModel = new Educations(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Educations)));
    ko.applyBindings(viewModel);
</script>


<script type="text/javascript">
    var WorkExperience = function (workexperiences) {

        var self = this;
        self.WorkExperience = ko.mapping.fromJS(workexperiences);

        self.addWorkExperience = function () {
            self.WorkExperience.push({ "EmployerName": ko.observable(""), "EmployerAddress": ko.observable("")});
        };
        self.removeWorkExperience = function (workexperience) {
            self.WorkExperience.remove(workexperience);
        };
    };

    var viewModel = new WorkExperience(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkExperience)));
    ko.applyBindings(viewModel);
</script>

Also I tried to bind Table1 but it didn't work

ko.applyBindings(viewModel, $('#Table1')[0]);

Uncaught ReferenceError: Unable to process binding "foreach: function (){return Educations }"

Uncaught ReferenceError: Unable to process binding "foreach: function (){return WorkExperience }"

I couldn't figure out why the binding is failing.

i have the following two tables one for Education and other for Work Experience, They give the error when i'm trying to bind the both table in one view, If i remove the binding (JS + HTML code) it works fine

HTML:

<div id=divtable1 class="widget widget-simple widget-table">
   <table id="Table1" class="table table-striped table-content table-condensed boo-table table-hover">
      <thead>
         <tr id="Tr1" class="filter">
            <th>University<span class="required">*</span></th>
            <th>Location <span class="required">*</span></th>
            <th></th>
         </tr>
      </thead>
      <tbody data-bind='foreach: Educations'>
         <tr>
            <td><input type="text" class='span11 required' data-bind="value: SchoolName" /></td>
            <td><input type="text" class='span11 required' data-bind="value: Location" /></td>
            <td><a href='#' data-bind='click: $root.removeEducation'>Delete</a></td>
         </tr>
      </tbody>
   </table>
   <button data-bind='click: $root.addEducation' class="btn btn-blue">Add Education</button>
</div>
<div id="divtable2">
   <table id="Table2">
      <thead>
         <tr id="Tr2" class="filter">
            <th>Employer Name<span class="required">*</span></th>
            <th>EmployerAddress <span class="required">*</span></th>
            <th></th>
         </tr>
      </thead>
      <tbody data-bind='foreach: WorkExperience'>
         <tr>
            <td><input type="text" class='span11 required' data-bind="value: EmployerName" /></td>
            <td><input type="text" class='span11 required' data-bind="value: EmployerAddress" /></td>
            <td><a href='#' data-bind='click: $root.removeWorkExperience'>Delete</a></td>
         </tr>
      </tbody>
   </table>
   <button data-bind='click: $root.addWorkExperience' class="btn btn-blue">Add Work Experience</button>
</div>

Java Script:

<script type="text/javascript">
    var Educations = function (educations) {

        var self = this;
        self.Educations = ko.mapping.fromJS(educations);

        self.addEducation = function () {
            self.Educations.push({"SchoolName": ko.observable(""), "Location": ko.observable("")});
        };

        self.removeEducation = function (education) {
            self.Educations.remove(education);
        };
    };

    var viewModel = new Educations(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Educations)));
    ko.applyBindings(viewModel);
</script>


<script type="text/javascript">
    var WorkExperience = function (workexperiences) {

        var self = this;
        self.WorkExperience = ko.mapping.fromJS(workexperiences);

        self.addWorkExperience = function () {
            self.WorkExperience.push({ "EmployerName": ko.observable(""), "EmployerAddress": ko.observable("")});
        };
        self.removeWorkExperience = function (workexperience) {
            self.WorkExperience.remove(workexperience);
        };
    };

    var viewModel = new WorkExperience(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkExperience)));
    ko.applyBindings(viewModel);
</script>

Also I tried to bind Table1 but it didn't work

ko.applyBindings(viewModel, $('#Table1')[0]);

• javascript
• knockout.js

• 1 I haven't used knockout a lot but it may be that you need to use ko.observableArray rather than ko.mapping.fromJS. Possibly the problem is trying to iterate an object rather than an array. Would be interested to know if this works. – daniellepelley Commented Mar 12, 2014 at 21:51
• Can you create a jsFiddle, will make life easier to diagnose – Robert Slaney Commented Mar 12, 2014 at 23:32
• Really, create a proper example, which is easy to debug. If you think that people will enjoy going through your wall of code, than most probably you are wrong. – Salvador Dali Commented Mar 13, 2014 at 1:34

2 Answers 2

try adding this <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> to your view. it will output the data that knockout contains in the current context.

Also you have one view and two view models that are trying to bind to it. create one viewmodel with both Educations and WorkExperience as properties.

something like

var vm = {
  Educations : educationViewModel,
  WorkExperience: workExperienceViewModel
}

ko.applyBindings(vm);

If you want to bind two view-models separately, you must define which section of your view to bind to. You do this by providing the element to ko.applyBindings as the second parameter.

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