KO ReferenceError：无法处理绑定

Posted 2023-03-27

【中文标题】KO ReferenceError：无法处理绑定

【英文标题】：KO ReferenceError: Unable to process binding

【发布时间】：2014-04-17 08:07:12

【问题描述】：

未捕获的 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]);

【问题讨论】：

我没有经常使用knockout，但可能你需要使用ko.observableArray而不是ko.mapping.fromJS。可能问题是试图迭代一个对象而不是一个数组。有兴趣知道这是否有效。

你能不能创建一个jsFiddle，让诊断更容易

真的，创建一个合适的示例，易于调试。如果您认为人们会喜欢浏览您的代码墙，那么您很可能是错的。

【参考方案1】：

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

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

类似

var vm = 
  Educations : educationViewModel,
  WorkExperience: workExperienceViewModel


ko.applyBindings(vm);

【讨论】：

简单而出色的调试工具 - 谢谢！

【参考方案2】：

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

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

【讨论】：

我应该如何从视图模型中读取数据作为 json 我尝试了很多解决方案，但没有一个有效