1

在我的javascript文件中，我混合了knockout和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 文件的结果？

4

1 回答 1

0

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

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

于 2013-10-01T18:16:16.030 回答