KnockoutJS - ViewModel (祖父 - 父 - 子)访问子元素中的父函数

KnockoutJS - ViewModel (Grandparent - Parent - Child) Accessing a Parent Function within Child element

本文关键字:元素 函数 访问 祖父 ViewModel KnockoutJS      更新时间:2023-09-26

我在挖空和挖空映射、客户视图模型、工作订单视图模型和修复视图模型中设置了祖父、父、子视图模型关系。

对于每个级别,如果记录已被修改,则 I 标记。 然后我有一个保存按钮来保存整个模型。 保存模型的函数位于祖父视图模型 (客户视图模型) 中

子级别元素的示例

<input class="form-control input-sm text-right" name="RepairCost" id="RepairCost" data-bind="value: RepairCost, event: {change: flagRepairAsEdited}" />

有没有办法在flagRepairAsEdit函数中调用父级/祖父级中的SAVE函数?

非常感谢!

这是我正在使用的JS代码(简化):

var ObjectState = {
    Unchanged: 0,
    Added: 1,
    Modified: 2,
    Deleted: 3
};
var workOrderMapping = {
    'WorkOrders': {
        key: function (workOrders) {
            return ko.utils.unwrapObservable(workOrders.WorkOrderId);
        },
        create: function (options) {
            return new WorkOrderViewModel(options.data);
        }
    },
    'Repairs': {
        key: function (repairs) {
            return ko.utils.unwrapObservable(repairs.RepairId);
        },
        create: function (options) {
            return new RepairViewModel(options.data);
        }
    }
};
RepairViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, workOrderMapping, self);

    self.flagRepairAsEdited = function () {
        if (self.ObjectState() != ObjectState.Added) {
            self.ObjectState(ObjectState.Modified);
        }
//WOULD LOVE TO CALL SAVE FUNCTION HERE
        return true;
    }
    ;
}
WorkOrderViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, workOrderMapping, self);
    self.flagWorkOrderAsEdited = function () {
        if (self.ObjectState() != ObjectState.Added) {
            self.ObjectState(ObjectState.Modified);
        }
      //WOULD LOVE TO CALL SAVE FUNCTION HERE
        return true;
    }
    ;
}
CustomerViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, workOrderMapping, self);
    self.save = function () {
        $.ajax({
            url: "/Customers/Save/",
            type: "POST",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function (data) {
                ko.mapping.fromJS(data.customerViewModel, workOrderMapping, self);
                if (data.newLocation != null)
                    window.location = data.newLocation;
            },
        });
    },
    self.flagCustomerAsEdited = function () {
        if (self.ObjectState() != ObjectState.Added) {
            self.ObjectState(ObjectState.Modified);
        }
        return true;
    }
    ;
}

有两种方法可以做到这一点

a) 将视图模型作为子函数的参数传递flagRepairAsEdited

data-bind="value: RepairCost, event: {change: flagRepairAsEdited.bind($data, $parent, $root)}" 

b) 将父视图模型的链接保存在子视图模型中

WorkOrderViewModel = function (data, parent) {
    this.parent = parent;
    ...
}

并使用parent.flagWorkOrderAsEditedparent.parent.flagWorkOrderAsEdited保存父视图模型和祖父视图模型