KnockoutJS Mapping - 为什么我的数组没有映射到可观察数组?

时间:2015-03-18 11:54:48

标签: javascript arrays knockout.js

我从我构建的API中返回了以下JSON:

{  
   "Pages":[  
      {  
         "Name":"Page 1",
         "Controls":[  
            {  
               "LabelText":"Summary",
               "Name":"txtSummary",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Event Date:",
               "Name":"txteventdate",
               "ControlType":10,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Impact:",
               "Name":"txtimpact",
               "ControlType":14,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Probability:",
               "Name":"txtprobability",
               "ControlType":14,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Due Date:",
               "Name":"txtduedate",
               "ControlType":10,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Score:",
               "Name":"numscore",
               "ControlType":14,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Primary Needs:",
               "Name":"cboprimaryneeds1",
               "ControlType":2,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Address",
               "Name":"txtAddressLine1",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Title",
               "Name":"optionpanel1",
               "ControlType":7,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Address",
               "Name":"txtAddressLine2",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Address",
               "Name":"txtAddressLine3",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Forename",
               "Name":"txtForename",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Address",
               "Name":"txtAddressLine4",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Surname",
               "Name":"txtsurname",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Postcode",
               "Name":"txtPostcode",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"EmployeeCode",
               "Name":"txtEmployeeCode",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Decapitated",
               "Name":"chkDecapitated",
               "ControlType":3,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Age",
               "Name":"txtAge",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Football Team",
               "Name":"txtFootballTeam",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Time",
               "Name":"timeSelection1",
               "ControlType":11,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Rugby Team",
               "Name":"txtRugbyTeam",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"dtFrom",
               "Name":"dtFrom",
               "ControlType":10,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"National Insurance",
               "Name":"txtNationalInsurance",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"dtTo",
               "Name":"dtTo",
               "ControlType":10,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            },
            {  
               "LabelText":"Shoe Size",
               "Name":"txtShoeSize",
               "ControlType":0,
               "IsMultiLine":false,
               "MaxLength":null,
               "MinLength":null
            }
         ]
      }
   ]
}

我正在尝试使用KnockoutJS映射插件(v2.4.1)自动将此结构映射到viewmodel但是我发现即使“Pages”是一个对象数组,它也被映射为一个可观察的而不是一个可观察的数组,我想要一个可观察的数组,以便我可以从中推送和弹出并相应地更新UI。

Knockout Mapping文档说明了这个..

  

“数组被转换为可观察数组。如果有更新   更改项目数量,它将执行相应的添加/删除   动作。它还会尝试保持订单与原始订单相同   JavaScript数组。“

以下是我的代码实际上是映射的内容......

// data is json above
var mappedData = ko.mapping.fromJS(data);
// mappedData.Pages is an observable containing an Array[] rather than an observableArray.  

任何帮助都会很棒,谢谢。

0 个答案:

没有答案