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> 添加到您的视图中。它将输出敲除在当前上下文中包含的数据。

另外，您有一个视图和两个试图绑定到它的视图模型。创建一个同时具有 Educations 和 WorkExperience 作为属性的视图模型。

类似

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

ko.applyBindings(vm);

Answer 2

如果您想分别绑定两个视图模型，您必须定义要绑定到视图的哪个部分。为此，您可以将元素提供给 ko.applyBindings 作为第二个参数。

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