带有映射插件的 Knockout.js 工作流

Question

我不确定我是否理解 Knockout.js 内部遵循的工作流程。我有一个使用映射插件动态定义的 ViewModel。它的形状是：

{ current: { foo: 'foo', bar: 'bar', id: 0 }
, ids:     [1,2,3,4,5] 
}

每个ids 对应一个可以属于current 的值。现在，复杂性出现了，因为在填充我的 viewModel 的初始 ajax 请求中，服务器以current: null 响应。我已经编写了代码以从ids 列表中取出第一个id 并运行另一个ajax 查询来填充current。看起来像这样：

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

  self.head = function () {
    if (self.promptIds().length != 0) {
      var nextId = _.head(self.promptIds());
      self.promptIds(_.tail(self.promptIds()));
      $.getJSON("my-url" + "/" + nextId, function (data) {
        self.current(ko.mapping.fromJS(data));
      });
    }
  }
}


$('document').ready ( function () {
  $.getJSON("view-model-route", function (data) {
    viewModel = new ViewModel(data);
    viewModel.head();
    ko.applyBindings(viewModel);
  });
});

请注意，在第二个块中，我创建了一个新的 ViewModel 对象并在其上调用 head()。一旦填充了viewModel.current() 对象，我就调用完整的viewModel 上的ko.applyBindings。我可以确认，当一切尘埃落定时，viewModel.current 不是null。但我仍然收到错误：

Uncaught TypeError: Unable to parse bindings.
  Bindings value: text: current().foo
  Message: Cannot read property 'foo' of null

我是否正在尝试做一些 Knockout 不适合做的事情？我需要另一层抽象吗？您将如何处理这种情况？

Answer 1

当您调用 ko.applyBindings 时，首先评估绑定。

因此，如果到那时您的 current 属性包含 null ，那么您得到 Cannot read property 'foo' of null 异常是正常的。

这个问题有多种解决方案：

• 使用空对象初始化current，因此current().foo 将被正确解析（但其值为undefined）：

  viewModel = new ViewModel(data);
  viewModel.head();
  viewModel.current({});
  ko.applyBindings(viewModel);
  

• 您可以在绑定中添加一个额外的条件来检查current 是否具有某些价值：

  <input type="text" data-bind="value: current() && current().foo" />
  

• 如果您正在处理嵌套属性，最好和最推荐的选项可能是使用with binding：

  <!-- ko with: current -->
      <input type="text" data-bind="value: foo" />
  <!-- /ko -->
  

演示JSFiddle.