2016-04-18 42 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

相關問題