从 knockoutjs 到视图页面的数据绑定信息 - 信息未显示答案

【问题标题】：data binding information from knockoutjs to the view page - info not showing从 knockoutjs 到视图页面的数据绑定信息 - 信息未显示
【发布时间】：2013-10-07 19:56:15
【问题描述】：

在我的 javascript 文件中，我混合了敲除和 jquery，其中包含两个不同的视图模型，我无法显示结果：

Javascript：

位置视图模型

var positionViewModel = function (data) {
        var _self = this;
        _self.PositionName = ko.observable(data.PositionName);
        _self.PositionRank = ko.observable(data.PositionRank);
        _self.ContentRole = ko.observable(data.ContentRole);
    }

    positionViewModel.AddPositions = function (data) {
        $.each(data, function (index, value) {
            positionViewModel.PushPosition(value);
        });
    };

    positionViewModel.PushPosition = function (postion) {
        viewModel.PositionTypes.push(new positionViewModel(position));
    };

用户视图模型

    // the ViewModel for a single User
    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);
    };

    userViewModel.AddUsers = function (data) {
        $.each(data, function (index, value) {
            userViewModel.PushUser(value);
        });
    };


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

职位和用户

ko.utils.arrayForEach(viewModel.PositionTypes(), function(position){    
     var usersInPosition = ko.utils.arrayFilter(viewModel.Users(), function(user){
          return user.ContentRole() == position.ContentRole();
     });
     ko.utils.arrayForEach(usersInPosition, function(user){        

    });
});

绑定

// Binds the main ViewModel
var bindModel = function (data) {
    var _self = viewModel;

    viewModel.TotalUser = ko.computed(function () {
        return _self.Users().length;
    });

    userViewModel.AddUsers(data);
    ko.applyBindings(viewModel, $('#UserView')[0]);
};

查看页面

<ul data-bind="foreach:PositionTypes">
            <li>
                <div>
                    <span data-bind="text:PositionName"></span>
                </div>
                <ul data-bind="template: { name: 'grid', foreach: Users}">

                </ul>
            </li>
        </ul>

结果示例：

首席执行官
詹姆斯

副总裁
约翰

工人
艾米
贝琪

如何更改视图以正确显示来自 javascript 文件的结果？

【问题讨论】：

你是如何应用 ko 绑定的？
你有什么烦恼？什么不工作？
@edhedges 我更新了我的帖子，上面显示了我的绑定 - 谢谢
@nemesv 职位名称未显示，职位内是用户姓名。如果我不在职位内循环，我可以显示用户的姓名，但因为我想在其中显示职位标题和用户
您的 PositionTypes 和用户是如何关联的？我在您的 POSITION ViewModel 上没有看到 Users 属性...

标签： javascript knockout.js knockout-2.0

【解决方案1】：

所以你的架构一开始就错了。在您的示例中，您显示了Position 类型的列表，每个Position 都有另一个User 类型的列表。我已经为您提供了正确的架构，以便您能够添加您需要的任何功能。在您开始编码之前，我会认真研究淘汰文档并进行一些设计。

http://jsfiddle.net/zBmSN/1/

【讨论】：

谢谢 - 感谢您的帮助。但我想知道，因为我想创建一个这样的 linq 查询，它将返回每个职位的用户，例如：linq.From(PositionTypes).ForEach(users in Users where PositionTypes.ContentRole == Users.ContentRole) select users?
这似乎是一个不同的问题。在主视图模型中创建一个执行此操作的函数。