2014-06-11 93 views
-1

所以繼承人如何工作到目前爲止,索引頁允許您創建一個遊戲。然後將遊戲發佈到/ 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()); 
}); 
+0

請使用[的jsfiddle(http://jsfiddle.net/)或別的東西... – Nano

+0

...除了把你的代碼放在這裏。 –

回答

0

淘汰賽將自動傳回目前項目作爲點擊事件綁定參數...

self.removeGame = function(game) { 
    self.games.remove(game); 
} 
+0

另外,請注意,在您的js示例中,您正在使用self.game而不是self.games ... – beauXjames

+0

它會刪除,但是當我點擊刷新它仍然存在。我希望它永遠消失,一旦我點擊刪除 – user3662011

+0

好,是的...你也必須從你的數據源中刪除它。你需要在self.removeGame方法中觸發一個異步調用到你的路由GMController – beauXjames