如何使一个删除按钮永久删除

How to make a delete button permanently delete.

本文关键字：删除 按钮 何使一      更新时间：2023-09-26

到目前为止，这是如何工作的，索引页允许你创建游戏。然后游戏被发布到/data/Games (Gamelist.html)。我想有一个按钮，从列表中永久删除游戏。我现在有一个删除按钮，但它不做任何事情。

索引(从这里创建游戏)

<html>
<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 type="text/javascript">
    $(function () {
        $('#button').on('click', function (data) {
            $.post('data/games/create/?title=5', function (d) { console.log(d) });
        })
    });
</script>
</head>

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

  </body>
 </html>
控制器

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

Gamelist (html) 

  <title>Game List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Gamelist.js"></script>
    </head>
    <body>
            <h4>Games</h4>
            <ul data-bind="foreach: $data.games">
                <li>
                    Game <span data-bind="text: $index"> </span>:
                    <span data-bind="text: Title"> </span>
                    <a href="#" data-bind="click: $parent.removeGame">Remove</a>
                </li>
            </ul>
            <button data-bind="click: addGame">Add</button>

    </body>
    </html>

Gamlist (javascript) 

function AppViewModel() {
var self = this;
self.games = ko.observableArray([]);
$.getJSON("/data/games", function (d) {
    self.games(d);
});
self.addGame = function () {
    self.game.push({ name: "Created On " + new Date() });
};
self.removeGame = function () {
    self.game.remove(this);
}
}
$(function () {
ko.applyBindings(new AppViewModel());
});

Knockout将自动将当前项作为click事件绑定的参数传回…

self.removeGame = function(game) {
    self.games.remove(game);
}
相关文章：