具有计算字段的淘汰赛映射答案

【问题标题】：knockout mapping with computed fields具有计算字段的淘汰赛映射
【发布时间】：2012-06-09 23:58:13
【问题描述】：

我从 WCF 服务获取数据，然后映射数据并将数据与我的 DOM 对象绑定：

var PayinyVM = {};

    $.getJSON('/service/PaidService.svc/PaidList', function (data) {
        var tmp = JSON.stringify(data.d);

        PayinyVM.model = ko.mapping.fromJSON(tmp);
        ko.applyBindings(PayinyVM);
    });

结果在我的 DOM 上显示为例外，将其绑定到模型。我找不到的是如何添加一些计算的 observable 假设我的数据返回的是 FirstName 和 LastName 的人，我怎样才能使用 FN + ' ' + LN 创建一个计算的 observable FullName。

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您可以通过创建内部映射的模型对象来反转映射。

var PayinyVM = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    this.fullName = ko.computed(function () {
        return self.Name() + " : just ";
    });
};

$.getJSON('/service/PaidService.svc/PaidList', function (data) {    
    ko.applyBindings(new PayinyVM(data.d));
});

希望这会有所帮助。

【讨论】：

非常感谢您的帮助，但这对我不起作用。我将 MyModel 更改为 PayingVM，并将 parse(data) 更改为 parse(tmp) 仍然出现错误； “self.FirstName 不是计算函数内部的函数。任何其他更正。这是我的新代码
var PayinyVM = 函数（数据）{ var self = this; ko.mapping.fromJS(data, {}, self); this.fullName = ko.computed(function () { return self.Name() + " : just "; }); }; $.getJSON('/service/PaidService.svc/PaidList', function (data) { var tmp = JSON.stringify(data.d); PayinyVM.model = new PayinyVM(JSON.parse(tmp)); // ko .mapping.fromJSON(tmp); ko.applyBindings(PayinyVM); });
@FrenchiInLA - 您正确地新建了模型，但随后将其分配给了 PayinyVM 函数的一个属性，这没有任何意义。也不需要先对你的 json 进行字符串化，它已经是一个 json 对象，为什么要序列化。我已经编辑了代码以适应您的需求。
再次感谢 madcap。这是有道理的，我开始理解淘汰赛，但仍然得到 self.Name 不是函数。传递的数据是正确的，并且名称是数据的每个对象的一部分，但是自我不知何故没有映射到这个数据我将尝试在js中制作一个简单的模拟文件，并让你知道。再次感谢，非常感谢您的帮助
jsfiddle.net/nYF67 我刚刚添加了从 WCF 获取的数据。请看一下，让我知道我缺少什么。谢谢

【解决方案2】：

这是你的小提琴的工作副本，我不得不做出很多假设，因为你的小提琴甚至不是正确的 javascript，看起来很困惑，甚至没有提到淘汰赛

var PaidPeople = function(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);
    this.fullName = ko.computed(function () {
                    return self.Name() + " : just ";
                });
}

var PayinyVM = function (data) {
                var self = this;

                ko.mapping.fromJS(data, {
                    'model' : {
                        create: function(options) {
                            return new PaidPeople(options.data);
                    }                        
                  }
                }, self);                
            };

var data = {model:[{__type: "PaidPeople:#model", Amount:110, Attendee:1, Name:'John'}]};

ko.applyBindings(new PayinyVM(data));

还有一个可行的小提琴：http://jsfiddle.net/qeUHd/

【讨论】：

我之前试过，得到PayinyVM.Name不是函数。在我的程序中，实际上我正在尝试向 Name 添加一些内容。不管怎么说，还是要谢谢你。 jsfiddle.net/nYF67中有版本
好吧，您没有显示该代码...更新您的问题以显示该代码。
哪个代码？这是疯狂的答案。基本上我想知道，一旦您将视图模型映射到接收到的数据，如何向其添加一些计算字段基础。谢谢
您的小提琴不是正确的 javascript，甚至没有对淘汰赛库的任何引用。
谢谢基思，现在我必须通过你的代码才能理解。

【解决方案3】：

事实证明，我必须在 javascript 中定义所有视图模型属性，以便在使用服务器数据更新视图模型之前，knockout 可以使用属性初始化视图模型

参考：http://www.underwatergorilladome.com/how-to-use-knockouts-computed-observables-with-the-mapping-plugin/

http://jsfiddle.net/GLDxx/2/

var model = {
    username : ko.observable(),
    get_student_info : ko.mapping.fromJS(
        {
            usr_lname : null,
            usr_fname : null,
            gender : null,
            dob : null
        },
        {
            create: function(options) {
                return (new (function () {
                    this.name = ko.computed(function () {
                        if (this.usr_lname == undefined || this.usr_fname == undefined)
                            return null;
                        else
                            return this.usr_lname() + ' ' + this.usr_fname(); 
                    }, this);

                    // let the ko mapping plugin continue to map out this object, so the rest of it will be observable
                    ko.mapping.fromJS(options.data, {}, this);
                }));
            }
        }
    )
};

【讨论】：

花了一个小时寻找答案，这个例子让一切变得清晰，我现在有了我想要的工作:)