1

在这里，我有我的 get 方法，它获取我想要返回的数据，以便将它与视图页面绑定。我很难理解如何将这些信息绑定到视图。

获取方法：

var getRoster = function () {
    Ajax.Get({
        Url: ....,
        DataToSubmit: {id: properties.Id },
        DataType: "json",
        OnSuccess: function (roleData, status, jqXHR) {

            console.log("roles:", roleData.length);

            Ajax.Get({
                Url: ...,
                DataToSubmit: { pageNumber: 1, id: properties.Id },
                DataType: "json",
                OnSuccess: function (userData, status, jqXHR) {

                    for (var x in roleData)
                    {
                        var role = roleData[x];
                        console.log(role);
                        for (var y in userData)
                        {
                            var user = userData[y];
                            if (user.ContentRole == role.ContentRole)
                            {
                                 rosterViewModel.PushUser(new userViewModel(user));
                                 console.log(user);
                            }
                        }
                        roleTypesViewModel.PushRole(new roleViewModel(role));
                    }
                } 
            });
        }
    });

 rosterViewModel.PushUser = function (user) {
        viewModel.RosterUsers.push(new userViewModel(user));
    };

roleTypesViewModel.PushRole = function (role) {
        viewModel.RosterRoleTypes.push(new roleViewModel(role));
    }

var userViewModel = function (data) {
        var _self = this;
        _self.ID = ko.observable(data.ID);
        _self.Name = ko.observable(data.Name);
        _self.Email = ko.observable(data.Email);
        _self.ContentRole = ko.observable(data.ContentRole);
    };

var roleViewModel = function (data) {
        var _self = this;
        _self.ContentRole = ko.observable(data.ContentRole);
        _self.RoleName = ko.observable(data.RoleName);
        _self.RoleRank = ko.observable(data.RoleRank);
        _self.UserCount = ko.observable(data.UserCount);
    };

 var viewModel = {
        RosterRoleTypes: ko.observableArray([]),
        RosterUsers: ko.observableArray([])
    };

看法：

<div id="gridView" data-bind="foreach: RosterRoleTypes">
            <h3 class="roleHeader"><span data-bind="text:RoleName"></span> 
                <span class="userCount">(<span data-bind="text:UserCount"></span>)</span>
            </h3>

            <div data-bind="template: { name: 'grid', foreach: RosterUsers}">

            </div>
        </div>

如何绑定我的数据以显示在我的视图中？

4

3 回答 3

1

如果您尝试将页面的多个区域绑定到不同的视图模型，则可以通过将附加参数传递给您调用的 ko.applyBindings() 方法来实现。您的问题是您正在混合模型和视图模型并且不正确地使用它们。如果您想让一个视图模型调整您的代码以包含视图模型的所有功能并将您的模型设置为模型而不是视图模型 -

function rosterViewModel() {
    var self = this;
    self.RosterRoleTypes = ko.observableArray([]),
    self.RosterUsers = ko.observableArray([])
    self.PushUser = function (user) {
        viewModel.RosterUsers.push(new userModel(user));
    };
    self.PushRole = function (role) {
        viewModel.RosterRoleTypes.push(new roleModel(role));
    };
self.getRoster = function () {
    Ajax.Get({
        Url: ....,
        DataToSubmit: {id: properties.Id },
        DataType: "json",
        OnSuccess: function (roleData, status, jqXHR) {
            Ajax.Get({
                Url: ...,
                DataToSubmit: { pageNumber: 1, id: properties.Id },
                DataType: "json",
                OnSuccess: function (userData, status, jqXHR) {

                    for (var x in roleData)
                    {
                        var role = roleData[x];
                        for (var y in userData)
                        {
                            var user = userData[y];
                            if (user.ContentRole == role.ContentRole)
                            {
                                 self.PushUser(new userModel(user));
                            }
                        }
                        self.PushRole(new roleModel(role));
                    }
                } 
            });
        }
    });
}

var userModel = function (data) {
        var _self = this;
        _self.ID = ko.observable(data.ID);
        _self.Name = ko.observable(data.Name);
        _self.Email = ko.observable(data.Email);
        _self.ContentRole = ko.observable(data.ContentRole);
    };

var roleModel = function (data) {
        var _self = this;
        _self.ContentRole = ko.observable(data.ContentRole);
        _self.RoleName = ko.observable(data.RoleName);
        _self.RoleRank = ko.observable(data.RoleRank);
        _self.UserCount = ko.observable(data.UserCount);
    };

ko.applyBindings(new rosterViewModel());

这假设您想为您的视图使用单个视图模型。如果您正在组合应该单独绑定的多个内容区域，您可以创建两个视图模型并将它们合并，如本问题所示 - KnockOutJS - Multiple ViewModels in a single View - 或者您也可以通过传递一个附加参数来单独绑定它们这里显示的 ko.applyBindings() 方法 -多视图应用程序的 knockoutjs 模式示例

于 2013-10-08T13:39:23.633 回答
0

您要绑定到 UI 的所有数据都将作为 KO 可观察或可观察数组的视图模型的属性。创建视图模型并为其成员分配数据（在您的情况下为回调）后，您需要使用 ko.applyBindinds 应用绑定，以便将数据绑定到 UI。在您的情况下，最后一个 AJAX 成功回调似乎是合适的地方。

此外，您的 HTML 使用模板绑定，但显然没有定义名称为“网格”的模板。检查这一点。

淘汰赛教程链接http://learn.knockoutjs.com/#/?tutorial=intro

于 2013-10-08T13:30:27.440 回答
-1

添加

ko.applyBindings(viewModel);

在你的应用程序的某个地方。

于 2013-10-08T13:20:01.127 回答