Hi everyone,
I am trying to make a simple to-do Windows 8 app with Javascript and HTML/CSS.
I used WinJS.Binding.List and WinJS.UI.ListView to make the simple UI and wire up a simple list of to-dos. The user could also add a new task to it.
However, I am now trying to have a checkbox inside the ListView, which will be placed next to each to-do so that the user could toggle 'finished' and the to-do will be deleted. The problem is, although I was able to wire up an event handler to my checkbox
with:
onclick="Home.deleteFunction(event)"
I am not sure what to write in the deleteFunction() as I do not know how to get the address to the to-do that has the checkbox clicked because in order to use this method:
Home.taskListShow.splice(key, 1);
a key, pointing to the item, needs to be provided. Do you know how to find this key?
Here is my code:
<body>
<div id="toDoTemplate" data-win-control="WinJS.Binding.Template">
<div class="mainClass">
<div class="todoClass">
<div class="toDoMask">
<div class="toDo">
<h2 data-win-bind="textContent:task"></h2>
</div>
</div>
<div class="quoteMask">
<div class="quote">
<h4 data-win-bind="textContent:quote"></h4>
</div>
</div>
</div>
<div class="delete-button">
<div class="checkbox">
<input class="delete-box" type="checkbox" onclick="Home.deleteFunction(event)" style="width: 25px; height: 25px;">
</div>
</div>
</div>
</div>
<div class="win-ui-light appGrid">
<div class="appViewContentMask">
<div class="appViewContent">
<div id="gridViewToDo" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#toDoTemplate'), layout:{type:WinJS.UI.GridLayout}}"></div>
</div>
</div>
</div>
</body>
Thank you.
