如何使用IEnumerable <ExpandoObject> 在knockout.js？

Question

问题描述

我想询问如何在knockout.js中使用Exbando Objects列表，使用Rob Conrey的Massive并且所有返回的结果都是动态的，这对我来说很好，它适合我的需要但是当涉及到将结果发送到淘汰赛时我只是'我不知道该怎么做。

目标

访问对象属性，如obj.Name，obj.Brand等...

示例代码

视图：

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

控制器：

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”：“超级酷的靴子，可以让你飞行（不是真的！）。”}等等......]]

脚本文件：

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

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

运行应用程序时出现JavaScript错误：

未捕获的ReferenceError：无法解析绑定。 绑定值：文本：名称消息：未定义名称

屏幕截图1：

屏幕截图2：

Answer 1

一般来说， 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);
    }));
});

Answer 2

看起来问题是因为您尝试将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
           });
       });
   });

}

使用knockout的arrayForEach函数迭代你的json数组，并将每个对象推入你的observableArray。

Answer 3

在你的JSON中我看到Key和Value的序列，所以你必须指定knockout必须查询的字段名称以获取相对值并将其放在屏幕上。

因此，将<strong data-bind="text: Name">更改为<strong data-bind="text: Key"> ，这应该适合您。