Question

在我的javascript文件中，我混合了knockout和jquery，它包含两个不同的视图模型，我在显示结果时遇到问题：

使用Javascript：

POSITION ViewModel

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

USER ViewModel

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

结果示例：

CEO
詹姆斯

副总统约翰

工人
艾米
贝琪

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

Answer 1

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

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

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

1 个答案: