How to remove a Binding.List item with a checkbox within ListView? RRS feed

  • Question

  • 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:


    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:

    	<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 class="quoteMask">
    					<div class="quote">
    						<h4 data-win-bind="textContent:quote"></h4>
    			<div class="delete-button">
    				<div class="checkbox">
    					<input class="delete-box" type="checkbox" onclick="Home.deleteFunction(event)" style="width: 25px; height: 25px;">
       <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>

    Thank you.

    Sunday, December 1, 2013 2:39 AM


  • Hi,

    Hope below link helps:


    Monday, December 2, 2013 10:16 AM