【问题标题】:Knockout Mapping - fromJS - failing on a simple example淘汰赛映射 - fromJS - 一个简单的例子失败
【发布时间】:2013-09-16 09:28:51
【问题描述】:

我试图弄清楚我对 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

【问题讨论】:

    标签: javascript knockout.js knockout-mapping-plugin


    【解决方案1】:

    ko.mapping.fromJS 处理参数有点棘手(见我的answer here),所以第二个参数通常是映射选项:

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

    演示JSFiddle.

    【讨论】:

    • 确实很棘手!我会像@Overflew 一样挣扎
    • 谢谢@nemesv。 knockoutjs.com/documentation/plugins-mapping.html 的 Knockout Mapping 文档肯定让我走错了路。我正在重新阅读它们,仍然试图了解调用 2-param 版本的上下文是正确的......
    • 啊,我现在明白了 - 感谢您在其他链接答案中对 1/2/3 参数的解释。
    【解决方案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];
      }
    } 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-10-17
      • 2012-06-08
      • 1970-01-01
      • 2012-12-05
      • 2015-03-30
      • 2017-07-07
      • 2014-03-26
      • 2014-03-20
      相关资源
      最近更新 更多