Javascript 如何将模型映射到淘汰

如何将阵列从模型映射到淘汰视图模型

我试过这个：

@using Newtonsoft.Json
   @model Hotel.Web.Controllers.FoodOrderModelView

   <table class="table table-responsive table-hover" data-bind="foreach: Items">
     <tr class="row">
       <td>
        <label data-bind="text: $data"></label>
        <label data-bind="text: Name"></label>
       </td>
     </tr>                            
  </table>

    <script>        
        function viewModel() {
            self = this;
            self.Items = ko.observableArray([]);
            var jsonModel = @Html.Raw(JsonConvert.SerializeObject(Model.LunchItems, new JsonSerializerSettings() { ReferenceLoopHandling  = ReferenceLoopHandling.Ignore}));
            console.log(jsonModel);
            var mvcModel = ko.mapping.fromJS(jsonModel,{}, self);
            self.Items(mvcModel);
            console.log(self.Items);
        };

        $(function () { 
            var myViewModel = new viewModel();
            ko.applyBindings(myViewModel);   
        });
    </script>

编辑：

JSON:

---

这里fiddler:

首先尝试使用

JSON.parse（jsonModel）

将JSON解析为JS对象， 请参见如何在代码段中将json解析为js对象：

var jsonModel='[{“午餐项目ID”：0，“FoodItem”：{“午餐项目ID”：1，“名称”：“项目”、“价格”：196.00，“描述”：“项目描述”、“类别”：2，“文件”：null，“文件ID”：1}，“FoodItemId”：0，“计数”：0}，{“午餐项目ID”：0，“FoodItem”：{“午餐项目ID”：2，“名称”：“1项目”、“价格”：29.00，“描述”：“1项目描述”、“类别”：2，“文件”：null，“文件ID”：null}，“FoodItemId”：0，“Count”：0}，{“午餐订单项目ID”：0，“FoodItemId”：{“午餐项目ID”：3，“名称”：“2项”，“价格”：19.00，“说明”：“2项说明”，“类别”：2，“文件”：null，“文件ID”：null}，“FoodItemId”：0，“计数”：0}”；
函数viewModel（）{
self=这个；
self.Items=ko.mapping.fromJS（[]）；
fromJS（JSON.parse（jsonModel），self.Items）；
console.log（self.Items（））；
};
$（函数（）{
var myViewModel=newviewmodel（）；
应用绑定（myViewModel）；
});
您的代码中有各种各样的问题，最明显的是：


您既保存了来自
fromJS
的结果，又提供了
self
作为第三个参数（即更新目标）。从我看来，后者应该足够了
您没有正确地将
self
声明为
var
您的JSON是一个数组，但是如果您想使用
fromJS
将其作为目标应用于
self
，那么JSON应该是一个具有
Items
属性的对象
您的视图假设所有
项
都有
名称
属性，但根据您自己的JSON，它嵌套得更深一层

顺便说一句，您应该将
项
作为事物的属性放入
fromJS
。您可以在c#端修复它，也可以像下面的示例中那样对其进行破解

修复了这些问题后，下面是一个稍微改进的代码示例：


//缩写
var rawJson=[
{
“午餐订单项目ID”：0，
“FoodItem”：{
“午餐ID”：1，
“名称”：“项目”
}
},
{
“午餐订单项目ID”：0，
“FoodItem”：{
“午餐ID”：2，
“名称”：“1项”
}
}
];
函数viewModel（）{
var self=这个；
self.Items=ko.observearray（[]）；
var jsonModel={Items:rawJson}；
fromJS（jsonModel，{}，self）；
};
var myViewModel=newviewmodel（）；
应用绑定（myViewModel）
标签{填充：4px；边框：1px实心灰色；显示：内联块；}

为什么您认为您得到的控制台输出是错误的？我一眼就觉得很好？无论如何，如果你需要我们的帮助，你需要帮助我们重现这个问题。尽量消除服务器端的潜在原因，并为我们提供一个完整的客户端复制（即通过内联SO问题中的
@Html.Raw
调用的结果）。@Jeroen，我编辑了我的问题，可能它不起作用，因为razor视图的模型是
IEnumerable
。这没什么关系。无论是在c#端修复它，还是在视图端修复它，作为OP的使用
Html.Raw
，都是微不足道的。我想我可以稍微改进一下我的答案，提出一个解决方案，我会的。@Jeroen，谢谢你的回答，我花了一整天的时间来解决这个问题。正如我所见，我无法将数组映射到viewModel@ArtemShaban当然可以，只要看看我的答案。@ArtemShaban我的答案是解决这个问题的一种方法，但是Joel说的对，另一个答案（经过上次编辑后）也显示了一种很好的方法。-（这个答案也不同于我的答案，因为它假设json作为json字符串而不是js对象可用，可能是因为您在编辑问题时从一个更改为另一个…但这只是一个细节）
1. [Object, Object, ...]
0:
Object Count: 0
Name: " item"
   ...
2. function observable() {
        if (arguments.length > 0) {
            // Write

            // Ignore writes if the value hasn't changed
            if (observable.isDifferent(observable[observableL…

[
    {
        "LunchOrderItemId": 0,
        "FoodItem": {
            "LunchItemID": 1,
            "Name": " item",
            "Price": 196,
            "Description": " item description",
            "Category": 2,
            "File": null,
            "FileId": 1
        },
        "FoodItemId": 0,
        "Count": 0
    },
    {
        "LunchOrderItemId": 0,
        "FoodItem": {
            "LunchItemID": 2,
            "Name": "1 item",
            "Price": 29,
            "Description": "1 item description",
            "Category": 2,
            "File": null,
            "FileId": null
        },
        "FoodItemId": 0,
        "Count": 0
    },
    {
        "LunchOrderItemId": 0,
        "FoodItem": {
            "LunchItemID": 3,
            "Name": "2 item",
            "Price": 19,
            "Description": "2 item description",
            "Category": 2,
            "File": null,
            "FileId": null
        },
        "FoodItemId": 0,
        "Count": 0
    }
]