使用 KnockoutMapping

问题描述

我正在开发一个 MVC/实体框架应用程序（我的第一个应用程序，我主要是一名 sql DBA/BI 开发人员）并且我正在使用 knockout.js 和 映射插件。我有一个带有两个子视图模型的视图模型：

EntityBridges - 将基本实体与其他实体（作为子实体，一种对象层次结构）相关联的桥记录列表
ExtProperties - 保存基本实体的“附加属性”列表。

页面上应该呈现的是：

具有直接归属于该实体类的某些属性的业务实体/对象
通过桥接表与该实体相关的附加属性列表
作为该实体的子实体的其他实体的列表，同样通过桥接表相关

我在尝试将 event: { change: flagExtPropertyAsEdited } 添加到第二个视图模型时遇到问题。我收到此错误：

未捕获的引用错误：无法处理绑定“foreach: function(){return ExtProperties }”

消息：无法处理绑定“event: function(){return { change:flagExtPropertyAsEdited} }”

消息：flagExtPropertyAsEdited 未定义

子视图模型的某些元素及其映射必须正常工作，因为没有此更改事件我可以向两个视图添加新项目-模型，而这些添加使它一直通过实体框架返回到我的数据库中。但我似乎无法一次将更改事件分配给多个视图模型。

我注意到，如果我在这里交换本节中映射定义的顺序：

Entityviewmodel = function (data) {
    var self = this;
    ko.mapping.fromJS(data,entityBridgeMapping,self);
    ko.mapping.fromJS(data,extPropertyMapping,self);

当页面呈现时，这两个视图模型中的第一个正确填充，第二个失败并显示错误。我担心我可能会以错误的方式重新映射子视图模型。

如果有什么不同，我一直在使用 Adam Churvis 在 Pluralsight 中的“父子数据与 EF、MVC、Knockout、Ajax 和验证”课程作为基础，因为它专注于父子关系。

这是我在这里的第一个问题，我希望我问得清楚。感谢您就我的问题或发布我的问题本身提供任何反馈。

这是我的 .js 文件中包含视图模型的部分：

var entityBridgeMapping = {
    'EntityBridges': {
        key: function (entityBridge) {
            return ko.utils.unwrapObservable(entityBridge.Id);
        },create: function (options) {
            return new EntityBridgeviewmodel(options.data);
            
        }
    }
};


EntityBridgeviewmodel = function (data) {
    var self = this;
    ko.mapping.fromJS(data,self);

    self.flagEntityBridgeAsEdited = function () {
        if (self.ObjectState() != ObjectState.Added) {
            self.ObjectState(ObjectState.Modified);
        }

        return true;
    };
};



var extPropertyMapping = {
    'ExtProperties': {
        key: function (extProperty) {
            return ko.utils.unwrapObservable(extProperty.Id);
        },create: function (options) {
            return new ExtPropertyviewmodel(options.data);
        }
    }
};

ExtPropertyviewmodel = function (data) {
    var self = this;
    ko.mapping.fromJS(data,self);

    self.flagExtPropertyAsEdited = function () {
        if (self.ObjectState() != ObjectState.Added) {
            self.ObjectState(ObjectState.Modified);
        }
        return true;
    };

};




Entityviewmodel = function (data) {
    var self = this;
    ko.mapping.fromJS(data,self);


    self.save = function () {


        $.ajax({
            url: "/Admin/Entity/Save/",type: "POST",data: ko.toJSON(self),contentType: "application/json",success: function (data) {
                if (data.entityviewmodel != null)
                    ko.mapping.fromJS(data.entityviewmodel,{},self);

                if (data.newLocation != null)
                    window.location = data.newLocation;
            }
        });
    },self.flagEntityAsEdited = function () {

        if (self.ObjectState() != ObjectState.Added) {
            //alert("flagged!");
            self.ObjectState(ObjectState.Modified);
        }
        return true;
    },self.addEntityBridge = function () {
        var entityBridge = new EntityBridgeviewmodel({ Id: 0,ChildId: "",ObjectState: ObjectState.Added });
        self.EntityBridges.push(entityBridge);
    };


    self.deleteEntityBridge = function (entityBridge) {
        self.EntityBridges.remove(this);

        if (entityBridge.Id() > 0 && self.EntityBridgesToDelete.indexOf(entityBridge.Id()) == -1)
            self.EntityBridgesToDelete.push(entityBridge.Id());
    };



    self.addExtProperty = function () {
        var extProperty = new ExtPropertyviewmodel({ Id: 0,ExtPropertyTypeId: 0,ExtPropertyValue: "",ObjectState: ObjectState.Added });
        self.ExtProperties.push(extProperty);
    };


};

这是我的 .cshtml 文件中的两个表：

<table class="table table-striped">
    <tr>
        <th>Additional Properties</th>
        <th>Property Value</th>
        <th><button data-bind="click: addExtProperty" class="btn btn-info btn-sm">Add</button></th>
    </tr>
    <tbody data-bind="foreach: ExtProperties">
        <tr>
            <td class="form-group"><select class="form-control" data-bind="options: $parent.ExtPropertiesForSelection,optionsText: 'ItemListLabel',optionsValue: 'Id',optionsCaption: 'Pick An Extended Property',value: ExtPropertyTypeId,event: { change: flagExtPropertyAsEdited } "></select></td>
            <td> <input class="form-control" data-bind="value: ExtPropertyValue"/></td>
        </tr>
    </tbody>
</table>

<table class="table table-striped">
    <tr>
        <th>Child Entities</th>
        <th>Child ID</th>
        <th>Parent ID</th>
        <th><button data-bind="click: addEntityBridge" class="btn btn-info btn-sm">Add</button></th>
    </tr>
    <tbody data-bind="foreach: EntityBridges">
        <tr>
            <td class="form-group"><select class="form-control" data-bind="options: $parent.BridgeEntitiesForSelection,optionsCaption: 'Pick An Child Entity',value: ChildId,event: { change: flagEntityBridgeAsEdited } "></select></td>
            <td class="form-group"><button class="btn btn-danger btn-sm" data-bind="click: $parent.deleteEntityBridge">Delete</button></td>
        </tr>
    </tbody>
</table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asp.net-mvc entity-framework javascript knockout-mapping-plugin knockout.js