Question

我尝试将选定的viewmodel项传递给保存功能。调用save函数但是选定的viewmodel项丢失或未传递。不知道该怎么做。如果我检查this.games，它是未定义的。我几乎完全按照任务示例进行了操作。

<div data-bind="foreach: games, visible: games().length > 0">
    <div class="row clearRight borderBottom">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <label class="" data-bind="text: gameDate"></label> / Time:
            <label class="" data-bind="text: gameTimeET"></label> / Tv Station:
            <label class="" data-bind="text: tvStation"></label>
        </div>
        <div id="mode-group" class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons">
            <div class="col-sm-12 col-md-4 col-lg-4 text-center">
                <label class="btn btn-default" data-bind="click: $parent.save.bind($parent)" ">
<input type=" radio" data-bind="attr: { value: awayTeam, name: gameId, id: 'a' + gameId() }">
                    <img data-bind="attr: { src: awayTeamLogoUrl, alt: awayTeamFullName }" style="height: 100px; width: 150px;" /><br />
                    <label data-bind="text: awayTeamFullName"></label>
                </label>
            </div>
            <div class="col-sm-12 col-md-2 col-lg-2 text-center" style="padding-top: 50px;">AT</div>
            <div class="col-sm-12 col-md-4 col-lg-4 text-center">
                <label class="btn btn-default" data-bind="click: $parent.save.bind($parent)" ">
<input type=" radio" data-bind="attr: { value: homeTeam, name: gameId, id: 'h' + gameId() } ">
                    <img data-bind="attr: { src: homeTeamLogoUrl, alt: homeTeamFullName }" style="height: 100px; width: 150px;" /><br />
                    <label data-bind="text: homeTeamFullName"></label>
                </label>
            </div>
        </div>
    </div>
</div>

function Game(data) {
    this.gameId = ko.observable(data.GameId);
    this.gameWeek = ko.observable(data.GameWeek);
    this.awayTeam = ko.observable(data.AwayTeam);
    this.homeTeam = ko.observable(data.HomeTeam);
    this.gameDate = ko.observable(data.GameDate);
    this.gameTimeET = ko.observable(data.GameTimeET);
    this.tvStation = ko.observable(data.TvStation);
    this.awayTeamLogoUrl = ko.observable(data.AwayTeamLogoUrl);
    this.homeTeamLogoUrl = ko.observable(data.HomeTeamLogoUrl);
    this.awayTeamFullName = ko.observable(data.AwayTeamFullName);
    this.homeTeamFullName = ko.observable(data.HomeTeamFullName);
    this.winner = ko.observable("");
}

function GamesListViewModel() {
    var self = this;
    self.games = ko.observableArray([]);
    self.gameId = ko.observable();
    self.gaemWeek = ko.observable();
    self.awayTeam = ko.observable();
    self.homeTeam = ko.observable();
    self.gameDate = ko.observable();
    self.gameTimeET = ko.observable();
    self.tvStation = ko.observable();
    self.awayTeamLogoUrl = ko.observable();
    self.homeTeamLogoUrl = ko.observable();
    self.awayTeamFullName = ko.observable();
    self.homeTeamFullName = ko.observable();
    self.winner = ko.observable();

    self.save = function () {       

        $.ajax("/Pick/Create", {
            data: {
                json: ko.toJSON({
                    games: this.games
                })
            },
            type: "POST",
            dataType: 'json',
            success: function (result) {
                alert(ko.toJSON(this.games))
            }
        });
    };

    $.ajax({
        url: "/Pick/GameDetail?weekId=7",
        //data: { codetype: codeType, filter: filter },
        type: "POST",
        dataType: 'json',
        success: function (data) {
            var mappedGames = $.map(data.g, function (item) {
                return new Game(item);
            });

            self.games(mappedGames);
        },
        error: function (requestObject, error, errorThrown) {
            var errorMessage = requestObject;
        }
    });

}

ko.applyBindings(new GamesListViewModel());

Answer 1

使用data-bind="click: $parent.save.bind($parent, $data)"作为您的点击绑定，并更改您的save处理程序以从点击装订中接收所选游戏作为参数：

    self.save = function (selectedGame) {
        $.ajax("/Pick/Create", {
            data: {
                json: ko.toJSON({
                    games: selectedGame
                })
            },
            type: "POST",
            dataType: 'json',
            success: function (result) {
                alert(ko.toJSON(self.games))
            }
        });
    };

敲击js点击传递选定的viewmodel项目

1 个答案: