Knockout.js complex object binding results empty HTML output

Question

I have a problem on populating data using Knockout.js. Data (A HomeViewModel having 9 MainMenuModel) is successfully retrieved from Web API. I expect 9 li tag under ul tag. But HTML output is empty. Tried hard but can't solve. I appreciate any help, thanks.

Data Model Acquired from Web API

public class HomeViewModel
{
    public List<MainMenuModel> MainMenus { get; set; }
}
public class MainMenuModel
{
    public string Name { get; set; }
    public string Url { get; set; }
}

Knockout script

function MenusViewModel() {
   var self = this;
   self.menus = ko.observableArray([]);
   var baseUri = '/api/Home';
   $.getJSON(baseUri, function (data) {
       self.menus = data.MainMenus;
   });
}

$(document).ready(function () {
  ko.applyBindings(new MenusViewModel(), document.getElementById('mainMenus'));
});

_MainMenu.cshtml (Partial View)

<ul id="mainMenus" data-bind="foreach: menus">
    <li>
        <a data-bind="attr: { href: $data.Url, title: $data.Name }, text: $data.Name"></a>
    </li>
</ul>

HTML Output

<ul id="mainMenus" data-bind="foreach: menus"></ul>

nemesv · Accepted Answer · 2013-09-23 08:09:53Z

2

ko.observable and ko.observableArray are functions. To assign them a new value you need to call them with the new value as the argument.

See also the documentation: Reading and writing observables.

So change your code in $.getJSON to:

$.getJSON(baseUri, function (data) {
    self.menus(data.MainMenus);
});

answered Sep 23, 2013 at 8:09

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

Collectives™ on Stack Overflow

Knockout.js complex object binding results empty HTML output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related