Kendo DataSource：如何为从远程 odata 源读取的数据定义“计算”属性答案

【问题标题】：Kendo DataSource: How to define "Computed" Properties for data read from remote odata sourceKendo DataSource：如何为从远程 odata 源读取的数据定义“计算”属性
【发布时间】：2013-02-10 18:29:39
【问题描述】：

情况：

剑道数据源

var ordersDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: "http://localhost/odata.svc/Orders?$expand=OrderDetails"
        }
    },
    schema: {
        type: "json",
        data: function(response){
            return response.value;
        }
        total: function(response){
            return response['odata.count'];
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
})

从odata源读取的json数据如下：

{
    odata.metadata: "xxxx",
    odata.count: "5",
    value: [
        {
            OrderId: 1,
            OrderedDate: "2013-02-20",
            OrderInfoA: "Info A",
            OrderInfoB: "Info B"
            OrderDetails: [
                {
                    OrderDetailId: 6,
                    OrderDetailInfoC: "Info C",
                    OrderDetailInfoD: "Info D"
                },
                {
                    //Another OrderDetail's data
                }
            ]
        },
        {
            // Another Order's data
        }
    ]
}

问题 1：

1.如果我想定义一个“计算”属性：OrderedDateRelative，它应该是今天（2013-02-25）和订单创建日期（2013-）之间的天数02-20），喜欢：“5天前”，我如何在客户端实现这一点？

问题1的答案：http://jsbin.com/ojomul/7/edit

问题 2--更新--

2.每个订单都有自己的嵌套属性OrderDetails，那么可以为嵌套的OrderDetails属性定义一个计算字段吗？ Like：每个OrderDetail的OrderDetailInfoCAndD，其值应该类似于：OrderDetailInfoC + OrderDetailInfoD，即“Info C Info D”？

谢谢，

院长

【问题讨论】：

+1 表示问题 2，该问题仍未得到解答。

标签： mvvm kendo-ui datasource odata computed-observable

【解决方案1】：

您可以通过指定数据源的模型来创建计算字段：

  dataSource = new kendo.data.DataSource({
    data: [
      { first: "John", last: "Doe" }, 
      { first: "Jane", last: "Doe" }
    ],
    schema: {
      model: {
        // Calculated field
        fullName: function() {
          return this.get("first") + " " + this.get("last");
        }
      }
    }
  });

这是一个现场演示：http://jsbin.com/ojomul/1/edit

【讨论】：

嗨，我编辑了你的演示，jsbin.com/ojomul/4/edit，CalculatedField 没有正确显示。
这是一个函数 - 你需要调用它 CalculatedField()
是的，作为函数调用它，谢谢。另一个问题是：我们可以做一些类似于 Nested Property OrderDetails 的事情吗？请参阅我更新的问题 2。
您能指定类型以便过滤器正常工作吗？比如将类型指定为布尔值、日期等。默认情况下它被视为字符串。

【解决方案2】：

这是在 Kendo Grid 中使用计算字段的一种方法。

var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 20,
    schema: {
        model: {
            total: function (item) {
                return this.UnitPrice * this.UnitsInStock;
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    sortable: true,
    filterable: true,
    toolbar: ["create"],
    columns: [
        { field: "UnitPrice", title: "Unit Price"},
        { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
        { field: "total()", title: "Total" }]
});

【讨论】：

【解决方案3】：

下面是一个在网格中使用它的示例。然后它还可以对列进行排序。

$("#grid").kendoGrid({ 
    dataSource: {
        data: [
            { first: "John", last: "Doe" }, 
            { first: "Jane", last: "Doe" }
        ],
        schema: {
          model: {
            // Calculated field
            fullName: function() {
              return this.first + " " + this.last;
            },
            fields: {
               first: { type: "string" },
               last: { type: "string" }
            }
          }
        }
    },
    columns: [
        {
            // Trigger function of the Calculated field
            field: "fullName()",
            title: "Fullname"
        },
        {
            field: "first",
            title: "firstname"
        }
    ]
});

【讨论】：