Question

目前我有一个网页，用户可以标题并创建新的游戏＆＃34; 。应该发生的是用户将名称输入文本框，点击＆＃34;创建＆＃34;然后创建游戏。目前，当用户点击创建时，生成GUID并创建游戏。如果用户将游戏命名为Test，则应显示，Game：Test Remove（单击删除将删除游戏。）但游戏列为，游戏：undefined删除。如何制作以便显示用户给游戏的名称？谢谢你的帮助

这是我的代码

控制器

using PlanningPoker.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace PlanningPoker.Controllers {
public class GMController : ApiController {
    private static List<Game> games = new List<Game>() {
            new Game() {
                ID = Guid.NewGuid(),
                Title = "D&D"
            }
        };

    [Route("data/games")]
    public IEnumerable<Game> GetAllGames() {
        return games;
    }

    [Route("data/games/create"), HttpPost]
    public Guid CreateGame(string title) {
        Game g = new Game() {
            ID = Guid.NewGuid(),
            Title = title
        };

        games.Add(g);

        return g.ID;
    }


    [Route("data/games/remove"), HttpPost]
    public void RemoveGame(Guid id) {
        games.RemoveAll(g => g.ID == id);
    }
 }
}

索引（hmtl）（用户可在此处创建游戏，此处显示创建的游戏）

<head>
<title>Planning Poker</title>
<style>
    .inlinetext {
        display: inline;
    }
</style>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Scripts/GameSVC.js"></script>
<script src="Gamelist.js"></script>
<script type="text/javascript">
    $(function () {
        $('#button').on('click', function (data) {
            svc.Game.Add($('#testtxt').val(), function (d) { console.log(d), window.location.reload(); });
        });
    });
</script>
</head>



<body>
<h3 class='inlinetext'> Create Game: </h3>
    <input type="text" id="testtext" name="ime">
    <button id="button" >Create</button>

<h4>Games</h4>

<ul data-bind="foreach: { data:$data.games, as:'$game' }">
    <li>
        Game :
        <span data-bind="text: $game.Title"> </span>
        <a data-bind="click: function(d,e) { $parent.removeGame(d); }">Remove</a>
    </li>
</ul>


</body>

 </html>

Gamelist（js）

function AppViewModel() {
var self = this;

self.games = ko.observableArray([]);

$.getJSON("/data/games", function (d) {
    self.games(d);
});


self.removeGame = function (game) {

    svc.Game.Remove(game.ID, function () {
       $.getJSON("/data/games", function (d) {
            self.games(d);
        });
    });
}

}
$(function () {
ko.applyBindings(new AppViewModel());
});

游戏SVC

var svc = svc || {
Game: {
    Add: function (title, cb) {
        $.post('data/games/create/?title='+title, cb);
    },
    Remove: function (id, cb) {
        $.post("data/games/remove/?id=" + encodeURIComponent(id), cb);
    }
}
};

Answer 1

我会在整个表单中使用knockout而不是jQuery和knockout的组合。

您可以在模型中添加一个可观察的游戏，然后在点击创建时将其添加到游戏observableArray中。然后将其设置为新游戏。

无需使用您在点击装订上使用的代码。默认情况下，foreach中的当前对象将传递给您的单击函数。

另一件事是，如果你正在使用休息，你实际上应该使用动词来表达不同的东西，比如＆＃34; DELETE＆＃34;用于删除项目。 http://www.restapitutorial.com/lessons/httpmethods.html。要做到这一点，您需要更改您的webapi。我下面的例子使用了其余的动词。

<body>
    <!-- ko with: game -->
    <h3 class='inlinetext'> Create Game: </h3>
        <input type="text" data-bind="value: Title">
        <button data-bind="click: $root.addGame">Create</button>
    <!-- /ko -->
    <h4>Games</h4>

    <ul data-bind="foreach: { data: games}">
        <li>
            Game :
            <span data-bind="text: Title"> </span>
            <a href="#" data-bind="click: $root.removeGame">Remove</a>
        </li>
    </ul>
</body>

var AppViewModel = function ($) {
    var self = this;

    self.games = ko.observableArray();

    $.getJSON("/data/games", function (games) {
        var mappedGames = $.map(games, function(game) { return new Game(game) });
        self.games(mappedGames);
    });

    self.addGame = function (game) {
        $.ajax({
            url: '/data/games/',
            type: "PUT",
            data: ko.toJSON(game),
            success: function (id) {
                game.ID = id;
                self.games.push(game);
                self.game(new Game());
            }
        });
    };

    self.removeGame = function (game) {
        $.ajax({
            url: '/data/games/' + game.ID,
            type: "DELETE",
            success: function (id) {
                self.games.remove(game);
            }
        });
    };

    self.game = ko.observable(new Game());
};

var Game = function (game) {
    var self  = this;

    self.ID = undefined;
    self.Title = ko.observable();

    //initilize game
    if (game) {
        self.ID = game.ID;
        self.Title(game.Title);
    }
};

这是一个演示，我嘲笑jquery来测试它：

http://jsfiddle.net/mq8Us/2/

＆＃34;未定义＆＃34;返回而不是游戏名称

1 个答案: