1

私のjavascriptファイルには、2つの異なるビューモデルを含むノックアウトと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>

結果の例:

CEO
ジェームズ


ジョン 副大統領

労働者
エイミー
・ベッツィ

ビューを変更して、javascript ファイルからの結果を適切に表示するにはどうすればよいですか?

4

1 に答える 1

0

したがって、あなたのアーキテクチャは最初から間違っていました。あなたの例では、 type のリストを表示しておりPosition、それぞれPositionに type の別のリストがありUserます。必要な機能を追加できるように、正しいアーキテクチャを備えたフィドルを作成しました。コーディングを始める前に、ノックアウトのドキュメントとデザインを少し真剣に調べます。

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

于 2013-10-01T18:16:16.030 に答える