2013-09-29 15 views
1

問題描述如何在knockout.js中使用IEnumerable <ExpandoObject>?

我想請教一下如何使用列表中knockout.js Exbando對象,現在用羅布Conrey的大規模和所有返回的結果是動態的,這很好我很適合我的需求,但是當它來發送結果淘汰賽,我只是不知道該怎麼辦。

目標

訪問對象的屬性,如obj.Name,obj.Brand等等

示例代碼

查看:

<div data-bind="foreach: Products"> 
    <p>Product name: <strong data-bind="text: Name"></strong></p> 
</div> 

Controlle R:

public JsonResult GetProducts() 
{ 
    Products products = new Products(); 
    var Model = products.GetAllProducts(); 
    return Json(Model, JsonRequestBehavior.AllowGet); 
} 

調用的GetProducts的結果是:

[[{"Key":"Id","Value":1},{"Key":"Name","Value":"Badass Boots"},{"Key":"Brand","Value":"Nike"},{"Key":"Description","Value":"Super cool boots that can make you fly (Not Really!)."}, etc...]]

腳本文件:

Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: Name Message: Name is not defined

:上運行的應用

function ProductListViewModel() { 
    // Data 
    var self = this; 
    self.Products = ko.observableArray([]); 

    $.getJSON("/Home/GetProducts", function (data) { 
     self.Products(data); 
    }); 
} 

JavaScript錯誤

屏幕截圖1:

enter image description here

屏幕截圖2:

enter image description here

+0

那麼,什麼是不workign這裏? – Tigran

+0

我收到此錯誤消息:Uncaught ReferenceError:無法解析綁定。 綁定值:文本:名稱 消息:名稱未定義 –

回答

2

一個ExpandoObject一般來說是爲了所有意圖和目的,一個字典。在此處序列化爲JSON時,它被視爲字典併成爲鍵/值對的集合(並非所有序列化程序都以這種方式運行,但您使用的是這樣)。它不是您可以通過名稱訪問成員的對象,您必須將其轉換爲您可以(或首先將其序列化)的表示。

做轉換是不是世界上最糟糕的事情:

function Product(item) { 
    var self = this; 
    // assuming item is an array of key/value pairs 
    ko.utils.arrayForEach(item, function(pair) { 
     // doesn't necessarily have to be mapped as an observable 
     self[pair.Key] = ko.observable(pair.Value); 
    }); 
} 

有了這一點,那麼你可以映射的結果,你的產品陣列:

$.getJSON("/Home/GetProducts", function (data) { 
    self.Products(ko.utils.arrayMap(data, function(item) { 
     return new Product(item); 
    })); 
}); 
+0

我不知道如何序列化在ASP.net工作或如果它甚至可配置。但我通常使用[Json.NET](http://james.newtonking.com/json)來滿足我所有的JSON需求,它將字典作爲對象序列化,而不是作爲鍵/值對的樸素集合。也許你可以在這裏使用Json.NET ......我只是不知道如何設置它。 –

+0

謝謝,這幫助我解決了我的問題。 –

0

在你的JSON我看到的KeyValue序列,所以你必須指定淘汰賽必須查詢獲得相對價值並將其放在屏幕上的提交名稱。

因此請將<strong data-bind="text: Name">更改爲<strong data-bind="text: Key">,並且此應爲爲您工作。

1

看起來問題是因爲你試圖將你的ko.observableArray的值設置爲一個json數組。不確定這會起作用。通常,這是我會怎麼做:

function ProductListViewModel() { 
    // Data 
    var self = this; 
    self.Products = ko.observableArray([]); 

    $.getJSON("/Home/GetProducts", function (data) { 
     ko.utils.arrayForEach(data, function(item) { 
      self.Products.push({ 
       Name : item.Name 
      }); 
     }); 
    }); 

}

使用淘汰賽的arrayForEach功能,通過您的JSON數組迭代,每個對象推入你的observableArray。

+0

我這樣做了,我也得到了未命中ReferenceError:無法解析綁定。 綁定值:文本:名稱 消息:名稱未定義 –

+0

我編輯了我的問題添加2個屏幕截圖希望它有幫助。 –

+0

你可以發佈產品c#類是什麼。看着你從服務器回來的JSON,有些東西看起來不太正確。數組中有一個數組,每個Product類屬性都是對象,這看起來不正確。我會認爲你的產品看起來更像這樣:{'Id':'1','Name':'BadAss Boots'}。集合中的每個產品都是一個具有某些屬性的Json對象。 – officert

相關問題