Question

这里我有我的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>

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

Answer 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（）方法如showm here - Example of knockoutjs pattern for multi-view applications

Answer 2

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

此外，您的HTML使用模板绑定，但显然没有定义名称为'grid'的模板。检查一下。

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

Answer 3

添加

ko.applyBindings(viewModel);

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

绑定视图与javascript淘汰赛

3 个答案: