KO ReferenceError:无法处理绑定

Question

未捕获的ReferenceError:无法处理绑定"foreach:function(){return Educations}"

未捕获的ReferenceError:无法处理绑定"foreach:function(){return WorkExperience}"

我无法弄清楚绑定失败的原因.

我有以下两个表,一个用于教育,另一个用于工作体验,当我试图在一个视图中绑定两个表时,它们给出错误,如果我删除绑定(JS + HTML代码)它工作正常

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 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>

我也尝试绑定Table1但它没有用

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

Answer 1

尝试将此添加<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>到您的视图中.它将输出当前上下文中knockout包含的数据.

您还有一个视图和两个尝试绑定到它的视图模型.使用Educations和WorkExperience作为属性创建一个viewmodel.

就像是

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

ko.applyBindings(vm);

Answer 2

如果要分别绑定两个视图模型，则必须定义要绑定到视图的哪个部分。您可以通过提供元素作为ko.applyBindings第二个参数来完成此操作。

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