多物体击倒映射

时间:2013-07-18 18:28:54

标签: javascript knockout.js

http://jsfiddle.net/VqenG/

希望一些knockout.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);

2 个答案:

答案 0 :(得分:1)

您必须将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/

答案 1 :(得分:0)

查看this fiddleko.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);
 } 
当你想根据服务器的新数据刷新viewmodel时,

ko.mapping.fromJS也很强大。

我希望它有所帮助。