使用javascript敲除绑定视图

使用javascript敲除绑定视图,javascript,knockout.js,Javascript,Knockout.js,这里我有一个get方法,它获取我想要返回的数据,以便将其与视图页面绑定。我很难理解如何将这些信息绑定到视图 获取方法: 视图: 如何将数据绑定到视图中显示?添加 ko.applyBindings(viewModel); 在应用程序中的某个地方。要绑定到UI的所有数据都将是viewmodel的属性,即可观察或可观察数组。在您的案例中,创建视图模型并为其成员分配数据回调后,您需要使用ko.applybinds应用绑定,以便将数据绑定到UI。在您的例子中,最后一次AJAX成功回调似乎是合适的位置

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

获取方法:

视图:

如何将数据绑定到视图中显示?

添加

ko.applyBindings(viewModel); 

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

要绑定到UI的所有数据都将是viewmodel的属性,即可观察或可观察数组。在您的案例中,创建视图模型并为其成员分配数据回调后,您需要使用ko.applybinds应用绑定,以便将数据绑定到UI。在您的例子中,最后一次AJAX成功回调似乎是合适的位置

此外,您的HTML使用模板绑定,但是显然没有使用名称“grid”定义模板。看看这个


敲除教程链接

如果您试图将页面的多个区域绑定到不同的视图模型,可以通过向调用的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());

这假设您希望对视图使用单个视图模型。如果您要组合多个应该单独绑定的内容区域,您可以创建两个视图模型并将其合并,如本问题所示,或者您也可以通过向ko.applyBindings方法传递附加参数(如此处所示)来单独绑定它们-

我添加了它,并添加了var vm=new viewModel and added但是我得到了这个错误:uncaughtexception js:uncaughttypeerror:object不是viewModel的函数;因为viewModel不是构造函数。您必须使用ko.applyBindingsviewModel;正如我所暗示的,我没有足够的声誉来发表评论。在JS视图中,模型不是函数/类。它是一个单例对象/对象liertal。所以只有您接收的对象不是函数错误。查看创建JS对象的不同方法@那么我是否必须更改var viewModel={..}的结构,使其成为一个函数?然而,现在您可以对它进行注释了。。。请注意,您的视图可以有多个视图模型。@PWKad我可以添加另一个视图模型作为函数并将其用于视图吗?请参阅上面的答案,我试过了,但是我遇到了一个无法解析绑定的错误,另外一个未定义的不是我正在研究的函数,它是基于我们所拥有的还是为了什么else@PWKad是你混淆了ViewModels和models。角色和用户也是视图模型。将可观察/视图逻辑添加到模型的那一刻就是ViewModel@Anders模型中的视图逻辑在哪里?仅仅因为模型使属性成为属性的可观察实例并不意味着模型包含任何视图逻辑…对视图进行双向绑定的能力不是视图感知逻辑?这是一个视图模型相信我。上面的例子不仅非常好,大多数视图模型也有额外的东西,如计算字段等,但它不需要是有效的视图模型。需要明确的是,视图模型甚至不需要有可观察的对象,当您将模型数据从服务器添加到viewmodel时,它本身就是一个viewmodel,模型的实例是在视图模型中创建的,可观察的属性就存在于此。。。若要访问属性,请在视图模型中执行此操作,若要除去它们,所有操作都在视图模型中执行。。。我列出的模型或多或少是一个类,它包含通过“更新”模型而创建的属性,那么如何将任何双向数据绑定回模型呢?你确定你读过我的答案吗?
ko.applyBindings(viewModel); 
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());