Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

KO ReferenceError: Unable to process binding

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

like image 553
Amr Ramadan Avatar asked Mar 12 '14 21:03

Amr Ramadan


2 Answers

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);
like image 131
Nathan Fisher Avatar answered Nov 10 '22 00:11

Nathan Fisher


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"));
like image 2
Michael Best Avatar answered Nov 10 '22 02:11

Michael Best