所以繼承人如何工作到目前爲止,索引頁允許您創建一個遊戲。然後將遊戲發佈到/ 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;
}
}
}
遊戲列表(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());
});
請使用[的jsfiddle(http://jsfiddle.net/)或別的東西... – Nano
...除了把你的代碼放在這裏。 –