2016-04-18 40 views
-1

我想要做的是从服务器获取数据,然后将其全部放入可观察对象中,然后使所有属性可见。我面临的问题是它并没有使我的所有属性都可观察,我需要它们全部都是可观察的,有时取决于数据,它使某些属性可观察,有时却不可见。Knockout JS没有设置可观察的所有成员

var viewModel = this; 
viewModel.Model = ko.observable(); 

viewModel.SetModel = function (data) { 
viewModel.Model(ko.mapping.fromJS(data)); 
} 

,我从服务器接收的数据是这样的,例如:normaldata,项(这是具有未知数量元件的阵列)。 因此,如果我尝试访问像viewModel.Model().Items[0]().Layer()这样的数据,我有时会使用Layer作为函数,有时它是具有可观察元素的普通元素。我希望项目内的所有对象都具有Layer作为函数。

服务器数据例如: 名称: “测试” 项目:[层[ID:132]] 在这个例子中名称,产品ID和可观察但层不是。

小提琴例如: jsfiddle.net/98dv11yz/3 所以问题是,有时该层是空导致KO使得房地产观察到,但有时该酒店有ID和KO仅使子元素观测。问题是,如果在代码中,我希望它是一个函数,所以我总是可以将它视为layer(),因为它现在有时是图层或图层()

+0

该帖子很难理解。请重新阅读并尝试澄清,并尝试添加[mcve]。编辑 – Jeroen

+0

...希望这已经够好了! – xDevil

+0

对不起,恐怕没有太大的帮助。你是否检查过我以前评论的链接?尝试为您的情况创建* runnable *(但最小)repro。从迄今为止发布的内容来看,这似乎是完全可能的。 (另外,如果你注意格式,如果可能的话在你的文章中拼写也会有所帮助;编辑时会有实时预览。) – Jeroen

回答

3

对发生了什么事情的补充:

ko.mapping插件在输入中遇到对象时,它将使对象的属性可观察,而不是属性本身。

例如:

var myVM = ko.mapping.fromJS({ 
    name: "Foo", 
    myObject: { 
    bar: "Baz" 
    } 
}); 

将归结为:

var myVM = { 
    name: ko.observable("Foo"), 
    myObject: { 
    bar: ko.observable("Baz") 
    } 
} 

到:

var myVM = { 
    name: ko.observable("Foo"), 
    myObject: ko.observable({ 
    bar: ko.observable("Baz") 
    }) 
} 

的问题与您的数据结构是myObject有时会是null ,有时是一个对象。第一个将被视为name财产在这个例子中,后者将被视为myObject道具。

我的建议:

首先:我建议使用ko.mapping.fromJS方法,如果你有一个有据可查的,统一的数据结构,而不是在具有多层次,复杂大型数据集。有时,创建在构造函数中有自己的映射逻辑的细长视图模型会更容易。

如果您不希望改变你的数据结构,并想用ko.mapping保留,这部分将必须改变客户端:

Items: [ 
    { layer: {id: "0.2"} }, 
    { layer: null} 
] 

你必须决定你想要达到的目标。视图模型应该用null图层去掉物品吗?或者你想渲染它并能够更新它?下面是如何“纠正”您创建一个视图模型前的数据为例:

var serverData = { 
    Name: "Example Name", 
    Id: "0", 
    Items: [ 
    {layer: {id: "0.2"} }, 
    {layer: null} 
    ] 
}; 

var correctedData = (function() { 
    var copy = JSON.parse(JSON.stringify(serverData)); 

    // If you want to be able to render the null item: 
    copy.Items = copy.Items.map(function(item) { 
    return item.layer ? item : { layer: { id: "unknown" } }; 
    }); 

    // If you don't want it in there: 
    copy.Items = copy.Items.filter(function(item) { 
    return item.layer; 
    }); 

    return copy; 
}()); 

无论这种解决方案是可以接受的那种依赖于你的现实生活中的使用将如何复杂得多是。如果数据有更多的复杂性和交互性,我会建议将这些项目映射到他们自己的视图模型,以处理缺失的属性以及哪些不是...

+0

谢谢!这就是我一直在寻找的! – xDevil

相关问题