多对象剔除映射

Multi object knockout mapping

本文关键字：映射 多对象      更新时间：2023-09-26

http://jsfiddle.net/VqenG/

希望一些击倒.js的大师能对这个有所了解

我试图让Contact对象进入Contact observable数组，它本身就是ContactGroup对象中的一个可观察数组，但我不明白如何做到这一点？这可能吗，或者我是不是走错了路？谢谢

var json =  
    {"contactGroups" : [
     {
             "name" : "Contact Group",
             "contact" : [
                     {
                             "name" : "aaaa",
                             "email" : "",
                             "telephone" : "",
                             "mobile" : "",
                             "mail_group" : "",
                             "comment" : ""
                     },
                     {
                             "name" : "bbbb",
                             "email" : "",
                             "telephone" : "",
                             "mobile" : "",
                             "mail_group" : "",
                             "comment" : ""
                     },
                     {
                             "name" : "cccc",
                             "email" : "",
                             "telephone" : "",
                             "mobile" : "",
                             "mail_group" : "",
                             "comment" : ""
                     }
             ]
     }
 ]}

function TechnicalViewModel(){
    self = this;
    var ContactGroups = ko.utils.arrayMap(json.contactGroups, function(item) {
        var group = new ContactGroup(item);
        var contacts = ko.utils.arrayMap(item.contact, function(item) {
        return new Contact(item)
        });
        group.contact(contacts)
        return group;
    })
    self.contactGroups(ContactGroups)
    function ContactGroup(data){
        var self = this;
        self.name = ko.observable(data.name);
        self.contact = ko.observableArray([]);
        function Contact(data){
            this.name = ko.observable(data.name);
            this.email = ko.observable(data.email);
            this.telephone = ko.observable(data.telephone);
            this.mobile = ko.observable(data.mobile);
            this.mail_group = ko.observable(data.mail_group);
            this.comment = ko.observable(data.comment);
        }    
    }
}
TechnicalView = new TechnicalViewModel
ko.applyBindings(TechnicalView);

您必须将Contact函数移到ContactGroup函数之外。它的范围被限制在ContactGroup函数内，不能被ko.utils.arrayMap函数看到。将其移出会将范围扩大到整个TechnicalViewModel。

function TechnicalViewModel(jsonData){
    self = this;
    var ContactGroups = ko.utils.arrayMap(jsonData.contactGroups, function(item) {
        var group = new ContactGroup(item);
        var contacts = ko.utils.arrayMap(item.contact, function(item) {
            return new Contact(item)
        });
        group.contact(contacts)
        return group;
    });
    self.contactGroups = ko.observableArray(ContactGroups);
    function Contact(data) {
        this.name = ko.observable(data.name);
        this.email = ko.observable(data.email);
        this.telephone = ko.observable(data.telephone);
        this.mobile = ko.observable(data.mobile);
        this.mail_group = ko.observable(data.mail_group);
        this.comment = ko.observable(data.comment);
    }
    function ContactGroup(data){
        var self = this;
        self.name = ko.observable(data.name);
        self.contact = ko.observableArray([]);
    }
}
var technicalVM = new TechnicalViewModel(json);
ko.applyBindings(technicalVM);

http://jsfiddle.net/VqenG/3/

看看这个小提琴和ko.mapping.fromJS.

ko.mapping.formJS允许这样做：

function Contact(data){
     this.name = ko.observable(data.name);
     this.email = ko.observable(data.email);
     this.telephone = ko.observable(data.telephone);
     this.mobile = ko.observable(data.mobile);
     this.mail_group = ko.observable(data.mail_group);
     this.comment = ko.observable(data.comment);
 }

一行：

function Contact(data){
    ko.mapping.fromJS(data, {}, this);
 }

当您想根据服务器上的新数据刷新视图模型时，ko.mapping.fromJS也是充满活力的。

我希望它能有所帮助。

相关文章：