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是函数。要为它们分配一个新值，您需要使用新值作为参数调用它们。

另请参阅文档：Reading and writing observables.

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

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

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

1 个答案: