0

データを取得するこの get/call メソッドがあり、OnSuccess に基づいて、さらにデータを取得するために別の get/call を行います。両方の get メソッドから返されたデータを表示したいと思います。

var getInfo = function () {
        Ajax.Get({
            Url: //URL,
            DataToSubmit: { id: properties.Id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                viewModel.PositionTypes = data; //ex return: Teacher, TA, Students

                Ajax.Get({
                    Url: //URL,
                    DataToSubmit: { pageNumber: 1, id: properties.Id },
                    DataType: "json",
                    OnSuccess: function (data, status, jqXHR) {
                        viewModel.Users = data;  //ex return: Matt, Steve, Maggie, Sandy

                        //Combine both results based on the Content Role 
                        //Some type of loop between the positionTypes and users where the content role will be equal
                    }
                });
            }
        });
    };

モデルを見る

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

 // the ViewModel for a single Position
    var positionsViewModel = function (data) {
        var _self = this;
        _self.ContentRole = ko.observable(data.ContentRole);
        _self.PositionName = ko.observable(data.PositionName);
        _self.PositionRank = ko.observable(data.PositionRank);
        _self.UserCount = ko.observable(data.UserCount);
    }

全体的な結果は次のようになります。

教師: マット
TA: スティーブ
生徒: マギー、サンディ

4

1 に答える 1

0

これを試してみてください。テストされていないため、失敗する可能性があることに注意してください。エラーが発生した場合はお知らせください。Knockout 仮想バインディングで型を作成した可能性があることにも注意してください

var viewUsersPositionModel = function(){
    var _self = this;
    _self.users = ko.observableArray();
    _self.position = ko.observable();
}

var viewModel = function(){
    var _self = this;
    _self.userPositions = ko.observableArray();
}

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

// the ViewModel for a single Position
var positionsViewModel = function (data) {
    var _self = this;
    _self.ContentRole = ko.observable(data.ContentRole);
    _self.PositionName = ko.observable(data.PositionName);
    _self.PositionRank = ko.observable(data.PositionRank);
    _self.UserCount = ko.observable(data.UserCount);
}


var getInfo = function () {
    Ajax.Get({
        Url: //URL,
        DataToSubmit: { id: properties.Id },
        DataType: "json",
        OnSuccess: function (positionData, status, jqXHR) {
            Ajax.Get({
                Url: //URL,
                DataToSubmit: { pageNumber: 1, id: properties.Id },
                DataType: "json",
                OnSuccess: function (userData, status, jqXHR) {
                    var vm = new viewModel();
                    for(var i in positionData)
                    {
                        var position = positionData[i];
                        var userPositionViewModel = new viewUsersPositionModel();
                        userPositionViewModel.position(new positionsViewModel(position));
                        for(var j in userData)
                        {
                            var user = userData[j];
                            if(user.ContentRole === position.ContentRole)
                            {
                                userPositionViewModel.users.push(new userViewModel(user));
                            }
                        }
                        vm.userPositions.push(userPositionViewModel);
                    }
                    ko.applyBindings(vm);
                }
            });
        }
    });
};

HTML

<div data-bind="foreach: userPositions">
    <span data-bind="text: position.PositionName"></span>: <!-- ko foreach: users --> <span data-bind="text: Name"></span><!-- /ko -->
</div>
于 2013-10-03T15:14:17.083 に答える