MVC3, Knockout.js and nested json objects

Question

Complete knockout.js newbie here. I'm having some trouble understanding how knockout.js works. Any help is appreciated.

I have a JSON model that I get back asp.net MVC that looks like somethings like this -

var model = [{
"Personal": {"Name" : "Something"},
"Address": [
          {"City" : "Some City"}
          {"City" : "Some Other City"}
          {"City" : "3rd City"}
"Relationships": [
          {"Affiliation" : "Aff1"},
          {"Affiliation" : "Aff2"},
]
]


var viewModel = ko.mapping.fromJS(model);
ko.applyBindings(viewModel);

Then, in my view I'm trying to do this -

<div data-bind="template: {foreach: Address}">
    <span data-bind="value: City"></span>
</div>

I get an 'Unable to parse bindings, Address is not defined' error. What am I doing wrong?

Try putting a fiddle together which demonstrates your problem (jsfiddle.net) with your exact js code and HTML, then someone can probably help you out. — Tom W Hall
– Tom W Hall, Commented Aug 5, 2012 at 2:31
Your model is an array, but your view's data-bind is looking for a object with a property "Address". As written, you probably want data-bind="foreach: model.Address". But first, your model should just be a single object, which has an array called Address. — John Papa
– John Papa, Commented Aug 5, 2012 at 2:42

antishok · Accepted Answer · 2012-08-05 02:33:25Z

2

What do you mean, it "looks something like this"? Your javascript model object as written is not a valid one (missing commas, mismatched brackets..). It looks like model is an array (not an object), and it doesn't make much sense to pass an array to ko.mapping.fromJS.

It works fine with valid data (and changing the span's binding to text instead of value), see the fiddle: http://jsfiddle.net/KXhem/16/

answered Aug 5, 2012 at 2:33

antishok

2,91018 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bookamp Over a year ago

OK. my bad. I was doing this to get data from the MVC model -> var model = '@Html.Raw(Json.Encode(Model))'; .I replaced it with model = @Html.Raw(Json.Encode(Model)); and it seems to be working. Your answer prompted me to look at the source JSON again, so thank you.

Chris · Accepted Answer · 2012-08-05 02:36:43Z

2

Going with what anitshok said earlier, here is a cleaned up version that does work, though, the data doesn't come from a server.

<div data-bind="template: { name: 'address-template', foreach: Address }">
</div>
<script type="text/html" id="address-template">     
    <span data-bind="text: City"></span><br />
</script>

<script type="text/javascript">
    var model = {
       Personal: { "Name": "Something" },
       Address: [
         { "City": "Some City" },
         { "City": "Some Other City" },
         { "City": "3rd City"}],
      Relationships: [
         { "Affiliation": "Aff1" },
         { "Affiliation": "Aff2"}]
    };

    ko.applyBindings(model); 
</script>

What your code seemed to be missing is the call to the template, the wrapper of the template and a model which had some bad markup in it. You should be able to get started from this.

Here is a link the knockout mappings, and the knockoutjs templates. I'm using knockoutjs 2.1.0, so you might be looking at an older example.

Good luck, and hope this helps some.

answered Aug 5, 2012 at 2:36

Chris

6,3559 gold badges38 silver badges59 bronze badges

1 Comment

Bookamp Over a year ago

I saw antishok's response first, but I want to say thanks to you too. Have an upvote +1.

Collectives™ on Stack Overflow

MVC3, Knockout.js and nested json objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related