knockout.js - Knockout.js复杂对象绑定(bind)结果为空HTML输出

我在使用Knockout.js填充数据时遇到问题。
从Web API成功检索数据(具有9个MainMenuModel的HomeViewModel)。
我希望ul标签下有9 li标签。但是HTML输出为空。努力尝试但无法解决。
感谢您的帮助，谢谢。

从Web API获取的数据模型

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

淘汰赛脚本

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(部分 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输出

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

最佳答案

ko.observable和ko.observableArray是函数。要为其分配新值，您需要使用新值作为参数来调用它们。

另请参见文档:Reading and writing observables.

因此，将$.getJSON中的代码更改为:

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