javascript - 将 ko.mapping 与 2 个模型一起使用时绑定(bind)不起作用

Question

我一直在尝试使用 knockout 绑定(bind)在带有表格的页面上进行下拉选择。当页面上只有一个下拉菜单和表格时，我已经设法让下拉菜单和表格正常工作，而且我没有在 knockout 绑定(bind)插件中使用映射选项。

但是，当我使用映射选项时，下拉菜单或表格无法正常工作。我无法在网上找到任何有助于解决问题的信息。

我在这里创建了一个 jsFiddle 以获取更多信息:

html如下:

<table class="table table-striped table-bordered table-curved">
    <tr>
      <th>Name</th>
      <th>Team</th>
    </tr>
  <!-- ko foreach: History -->
  <tr>
    <td data-bind="text: Name"></td>
    <td data-bind="text: Team1"></td>
  </tr>
  <!-- /ko -->
</table>

js 是:

$(function () {
  var reasons = [
    { Id: 1, Reason: "Late", SafeName: "late" },
    { Id: 2, Reason: "Road Works", SafeName: "road_works" },
    { Id: 3, Reason: "Later", SafeName: "later" },
  ]

  var history = [
    { Name: "John", Team: "Team1" },
    { Name: "Peter", Team: "Team1" },
    { Name: "Simon", Team: "Team2" }
  ]

  function GetData(){
    return [history, reasons];
  }

  function ReasonModel(data, parent) {
    var self = this;
    ko.mapping.fromJS(data, {}, parent.Reasons)
  }

  function DelayModel(data, parent) {
var self = this;
    ko.mapping.fromJS(data, {}, parent.History)
  }

  function ViewModel() {
    var self = this;

    var mapping = {
      reasons: {
        create: function (options) {
          return new ReasonModel(options.data, self);
        }
      },
      history: {
        create: function (options) {
          return new DelayModel(options.data, self);
        }
      },
    }

    self.History = ko.observableArray([]);
    self.Reasons = ko.observableArray([]);
    self.SelectedReason = ko.observable();

    self.GetHistory = function(){
      GetData().done(function(result){
        ko.mapping.fromJS(result, mapping, self);
      })
    }
  }
  var vm = new ViewModel();
  ko.applyBindings(vm);
  vm.GetHistory();
});

http://jsfiddle.net/372221/vg6kf3pw/14/

谁能帮我解决这个问题？

Answer 1

您的 fiddle 中有很多错误/错误。首先，这是一个working one .

这是您的错误。

• jsfiddle 没有正确设置。要正确设置它，请在 Javascript 设置中选择库 Knockout 3.4。之后就不需要直接引用js文件了。此外，您根本没有引用映射插件。最后，您不需要 jQuery 文档就绪包装，尤其是当甚至没有引用 jQuery 时。
• 映射插件从对象映射到对象，默认情况下必须具有匹配的属性名称，区分大小写。因此，您必须提供来自 GetData 的正确来源。
• GetData 方法没有返回类似 promise 的对象，因此没有 done 回调。在我的版本中，我为此使用了一些模拟。
• 由于无效的 HTML，ko 无法处理虚拟绑定(bind)节点，所以我需要添加正确的 tr 环绕 th 标签。
• 您的绑定(bind)不正确:Team 是正确的，而不是 Team1，并且在 optionsText 中，正确的 getter 应该返回 SafeName(我猜)。

更新

您更新的 fiddle 有这些错误。

• 几个单词的拼写错误或错误情况。在开发工具 (F12) 打开的情况下运行 fiddle 时，您会看到这些基本问题。控制台将为您提供 ko 绑定(bind)的异常(exception)情况。
• 您在调用映射之前应用了绑定(bind)。因此，这导致当时绑定(bind)属性未定义，因为它们是由映射插件即时创建的(这是设计原因之一，例如我不使用它的原因之一)。所以首先你必须调用 GetHistory，然后是 ko.applyBindings。
• 在您的子项的构造函数中，您将例如 parent.DelayHistory 作为第三个参数传递给 ko.mapping.fromJS，因此实际上插件将属性填充到 observableArray 而不是实际的项目。事实上，在这种情况下您甚至不需要 parent 引用(除非您在实际代码中有其他原因)。