Knockout.mapping：它是否使所有嵌套对象都可观察？

Question

我对 Knockoutjs 真的很陌生（一般来说对 javascript 不是很好）并且我正在尝试映射 JSON 对象的所有可能的嵌套对象，以便每个人都可以观察到。我的印象是使用 ko.mapping.fromJS 会导致所有对象及其对象都是可观察的。但是，我没有看到这种情况发生。

我在 jsfiddle 中所做的并不是我真正在做的事情，但它确实表明我正在尝试映射一个对象，然后将嵌套值绑定到一个 HTML 跨度。

http://jsfiddle.net/Eves/L5sgW/32/

HTML

<p> <span>Name:</span>
<span data-bind="text:  IntroData.Name))"></span>
</p>    

JS

$(function () {

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

    return me;
};

var stuff = {
    IntroData: {
        Name: 'Test'
    }
};
window.viewModel = ko.mapping.fromJS(new ViewModel(stuff));
ko.applyBindings(window.viewModel);
});

是否只是我必须使用映射选项才能使嵌套对象可观察？如果是这样，如果 JSON 对象如此庞大和复杂（这显然不是）怎么办？是否可以使用一些递归功能来遍历每个对象的嵌套对象以使它们都可观察？

Answer 1

您的代码 sn-p 和 jsfiddle 存在几个问题：

• 小提琴不包含映射插件
• fiddle 不包含 jQuery（但无论如何都可以删除 jQuery 特定的代码）
• span 元素是自动关闭的，但不应该是
• 映射插件需要“额外的映射选项”作为第二个参数，me 应该是第三个参数
• 您的模型上缺少 InitialLoadOfApplication 函数（尽管我不清楚它的用途是什么）
• 您在 span 上的 text 绑定有两个不应该存在的杂散括号

如果我解决了所有这些问题，我最终会得到以下结果（另请参阅 this fiddle）：

<p> 
    <span>Name:</span>
    <span data-bind="text: IntroData.PlanName"></span>
    <button id="update" data-bind="click: InitialLoadOfApplication">Update!</button> 
</p>

还有这个 Javascript：

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

    me.InitialLoadOfApplication = function() { alert('loading!'); };

    return me;
};

var stuff = {
    IntroData: {
        PlanName: 'Test'
    }
};

window.viewModel = ko.mapping.fromJS(new ViewModel(stuff));
ko.applyBindings(window.viewModel);

关于您的问题，根据我的经验，映射插件可以处理相当复杂的对象。如果你到达它的边界，总会有“额外的映射信息”来处理边缘情况。 The relevant documentation 很好地解释了这些。