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

Question

我在使用 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（部分视图）

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

Answer 1

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

另请参阅文档：阅读和编写可观察对象。

因此，将您的代码更改$.getJSON为：

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