Question

我正在试图弄清楚我对Knockout的映射库有什么误解。我已将其剥离为一个简单的示例，但仍然可以通过fromJS调用使其失败（而不是使用映射变量进行更新）。

在这个例子中，我从根本上犯了什么错误？

// Here's my view model
var ViewModel = function() {
    this.firstName = ko.observable('first');
    this.lastName = ko.observable('last');
};

var myVM = new ViewModel();

ko.applyBindings(myVM); // Apply to Knockout (works)

myVM.lastName('maiden name'); // Test an update (works)

var newData = {firstName: 'new', lastName: 'person'};

// Try update the ViewModel
ko.mapping.fromJS(newData, myVM); //(No update, or error)

// Intended result - UI updates to 'new person'

相应的观点：

<div class='liveExample' >   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
</div>

我的JS Fiddle example。

Answer 1

ko.mapping.fromJS处理参数有点棘手（参见我的answer here），所以第二个参数通常是映射选项：

ko.mapping.fromJS(newData, {} /* mapping options */, myVM);

演示JSFiddle。

Answer 2

我发现如何只使用2个数据参数。

将ViewModel创建为原始数据的映射，然后使用ko.mapping.fromJS(data, ViewModel)。

更新jsFiddle

<强>解释

Knockout使用名为mappingProperty = "__ko_mapping__"的属性来识别先前已映射数据的时间。如果找到，它会将第二个参数设置为目标（在本例中为ViewModel）。

摘自 ko.mapping.js 的调试版本：

var mappingProperty = "__ko_mapping__";

[...]

if (arguments.length == 2) {
  if (arguments[1][mappingProperty]) {
    target = arguments[1];
  } else {
    options = arguments[1];
  }
}

Knockout Mapping - fromJS - 失败了一个简单的例子

2 个答案: