javascript - 从knockoutjs到 View 页面的数据绑定(bind)信息 - 信息未显示

Question

在我的 javascript 文件中，我混合了 knockout 和 jquery，其中包含两个不同的 View 模型，但我在显示结果时遇到了问题:

Javascript:

位置 View 模型

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));
    };

用户 View 模型

    // 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){        

    });
});

绑定(bind)

// 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>

结果示例:

首席执行官
詹姆斯

副总裁
约翰

worker
艾米
贝特西

如何更改 View 以正确显示 JavaScript 文件的结果？

Answer 1

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

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