如何将模型剔除

Question

How I can map array from my model to knockout viewModel?

I have tried this:

@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>

I get right JSON and strange message.

On console I get this log:

why I can't see mvcModel?

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…

EDITED:

JSON:

[
    {
        "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
    }
]

Here fiddler: https://jsfiddle.net/ez358nv6/

Answer 1

Try to parse the JSON to JS object first with JSON.parse(jsonModel) , See how to parse the json to js object in the snippet:

 var jsonModel = '[{"LunchOrderItemId":0,"FoodItem":{"LunchItemID":1,"Name":" item","Price":196.00,"Description":" item description","Category":2,"File":null,"FileId":1},"FoodItemId":0,"Count":0},{"LunchOrderItemId":0,"FoodItem":{"LunchItemID":2,"Name":"1 item","Price":29.00,"Description":"1 item description","Category":2,"File":null,"FileId":null},"FoodItemId":0,"Count":0},{"LunchOrderItemId":0,"FoodItem":{"LunchItemID":3,"Name":"2 item","Price":19.00,"Description":"2 item description","Category":2,"File":null,"FileId":null},"FoodItemId":0,"Count":0}]'; function viewModel() { self = this; self.Items = ko.mapping.fromJS([]); ko.mapping.fromJS(JSON.parse(jsonModel),self.Items); console.log(self.Items()); }; $(function() { var myViewModel = new viewModel(); ko.applyBindings(myViewModel); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <table class="table table-responsive table-hover" data-bind="foreach: Items"> <tr class="row"> <td> <label data-bind="text: $data.FoodItem.Name"></label> <label data-bind="text: $data.FoodItem.Description"></label> </td> </tr> </table> 

But this is a workaround because you are using JSON.Net to Serialize the model and it return a JSON string, you can use this to raw your model @Html.Raw(Json.Encode(Model)) and it will be the JS object from the JSON.

Answer 2

You have all sorts of problems in your code, most notably:

• You're both saving the result from fromJS as well as supplying self as the third argument (ie the update target). From what I see the latter should suffice.
• You're not declaring self properly as a var .
• Your JSON is an array, but if you want to use fromJS to apply it to self as a target, the JSON should be an object with an Items property.
• Your view assumes all of the Items have a Name property, but according to your own JSON that's nested one level deeper.

By the way, you should have Items as a property on the thing going into fromJS . You can either fix that on the c# side, or you can hack around it as below in my example.

With those things fixed, here's a slightly improved code sample to work with:

 // Abbreviated var rawJson = [ { "LunchOrderItemId": 0, "FoodItem": { "LunchItemID": 1, "Name": " item" } }, { "LunchOrderItemId": 0, "FoodItem": { "LunchItemID": 2, "Name": "1 item" } } ]; function viewModel() { var self = this; self.Items = ko.observableArray([]); var jsonModel = { Items: rawJson }; ko.mapping.fromJS(jsonModel, {}, self); }; var myViewModel = new viewModel(); ko.applyBindings(myViewModel); 

 label { padding: 4px; border: 1px solid gray; display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <table data-bind="foreach: Items"> <tr> <td> <label data-bind="text: LunchOrderItemId"></label> <label data-bind="text: FoodItem.Name"></label> </td> </tr> </table>