Question

未捕获的ReferenceError：无法处理绑定＆＃34; foreach：function（）{return Educations}＆＃34;

未捕获的ReferenceError：无法处理绑定＆＃34; foreach：function（）{return WorkExperience}＆＃34;

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

我有以下两个表，一个用于教育，另一个用于工作体验，当我试图在一个视图中绑定两个表时，它们会给出错误，如果我删除绑定（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，$（＆＃39;＃Table1＆＃39;）[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"));

KO ReferenceError：无法处理绑定

2 个答案: