javascript - Foreach 数据未通过 Knockout Js Object Observable 反射(reflect)到 UI

Question

下面是 View 模式，我在其中获取 ajax 响应并加载到可观察值。

var userManagementVM = {
    responseSetUpData: ko.observable({
        userList: ko.observable(),
        userListViewModel: ko.observableArray(),
        MeetingId: ko.observable(),
        MeetingTypeId: ko.observable(),
        MeetingType: ko.observable()
    }),
     SetListOfUserInRoles: function () {
        var self = this;
        var ajaxUrl = ApplicationRootUrl("UserRoleManagement", "UserManagement");
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: ajaxUrl,
            dataType: "json",
            success: function (data) {
                self.responseSetUpData(data);
                console.log(self.responseSetUpData())
            },
            error: function (err) {

            }
        });
    }
}


$(document).ready(function () {
    ko.applyBindings(userManagementVM, document.getElementById("rightdash-container"));
    userManagementVM.SetListOfUserInRoles();
});

来自 ajax 的响应已成功加载到可观察值。下面是控制台的输出

HTML 代码

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Users</th>
            <th scope="col">Role</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: responseSetUpData.userListViewModel">
        <tr>
            <td><input class="form-check-input" type="checkbox" data-bind="checked: SelectedUser"><span data-bind="text: $data.FirstName"></span></td>
            <td><select data-bind="options: $data.Roles,optionsText: 'Name',value: $data.SelectedRoleId,optionsCaption: '-- Select Role --'"></select></td>
        </tr>
    </tbody>
</table>

该值未绑定(bind)到 UI。

Answer 1

您需要在绑定(bind)中获取可观察值 - responseSetUpData() 的值:

<tbody data-bind="foreach: responseSetUpData().userListViewModel">

否则您将尝试从可观察函数对象获取userListViewModel:-)