Knockoutjs函数更新模型时应出现异常

Knockoutjs Function Expected Exception on updating model

本文关键字:异常 函数 更新 模型 Knockoutjs      更新时间:2023-09-26

经过大量的研究、跟踪和错误,我还没有想出解决方案。请帮忙!代码中的SearchCustomer方法对有效和无效的场景进行了注释。

情况

我在映射插件中使用了knockoutjs。我采用了一个视图模型,其中包含来自服务器的Workorder,它包含一些关于它的属性,以及下面的Customer模型和Customer下面的Contact模型。

在工单屏幕上,用户可以搜索客户,从而弹出模式搜索窗口。他们选择了该客户,客户的id和客户模型将返回到工作订单中。我更新工单的customerID没有问题,但当我尝试更新客户数据(包括联系人)时,我得到了Function Expected错误。

代码

function WorkorderViewModel(data) {
    var self = this;
    data = data || {};
    mapping = {
        'Workorder': {
            create: function (options) {
                return new Workorder(options.data, self);
            }
        }
    }
    ko.mapping.fromJS(data, mapping, self);
    self.ViewCustomer = function () {
        self.Workorder.Customer.View();
    }
    self.SearchCustomer = function () {
        self.Workorder.Customer.Search(function (customerID, customer) {
            self.Workorder.CustomerID(customerID); //Works
            self.Workorder.Customer(customer) //Function Expected, I feel this should work! Please help!
            self.Workorder.Customer = new Customer(customer, self.Workorder); //No Error doesn't update screen
            self.Workorder.Customer.Contact.FirstName(customer.Contact.FirstName); //Works, updates screen, but I don't want to do this for every property.
            self.Workorder.SaveAll(); //Works, reload page and customer data is correct.  Not looking to reload webpage everytime though.
        })
    }
}
function Workorder(data, parent) {
    var self = this;
    data = data || {};
    mapping = {
        'Customer': {
            create: function (options) {
                return new Customer(options.data, self);
            }
        }
    }
    ko.mapping.fromJS(data, mapping, self);
}
function Customer(data, parent) {
    var self = this;
    data = data || {};
    mapping = {
        'Contact': {
            create: function (options) {
                return new Contact(options.data, self);
            }
        }
    }
    ko.mapping.fromJS(data, mapping, self);
}
function Contact(data, parent) {
    var self = this;
    data = data || {};
    mapping = {};
    ko.mapping.fromJS(data, mapping, self);
    self.AddedOn = ko.observable(moment(data.AddedOn).year() == 1 ? '' : moment(data.AddedOn).format('MM/DD/YYYY'));
    self.FullName = ko.computed(function () {
        var fullName = '';
        if (self.FirstName() != null && self.FirstName() != '') {
            fullName = self.FirstName();
        }
        if (self.MiddleName() != null && self.MiddleName() != '') {
            fullName += ' ' + self.MiddleName();
        }
        if (self.LastName() != null && self.LastName() != '') {
            fullName += ' ' + self.LastName();
        }
        return fullName;
    })
}

谢谢大家!

由于self.Workorder.Customer最初是使用ko.mapping填充的,因此当您想要重新填充它时,应该再次使用ko.mapping,如:

ko.mapping.fromJS(customer, self.Workorder.Customer)

尝试更改:

self.Workorder.Customer(customer);

至:

self.Workorder.Customer = customer;

我的猜测是,工作订单的Customer属性不是可观察的。