JayStorm TodoExample Step5

Provide "delete item" functionality for authenticated users

by JayData

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<body>
    <h3>Add new Todo<h3>
    <form id="addNewItem">
        <div>Task:</div>
        <input name="task" type="text"/><br />
        <input type="submit" value="Add Todo" />
    </form>

    <script id="TodoItem" type="x-handlebars-template">
         <li class="todo-item" data-item-id={{id}}>
            <div>
                <input data-complete-todo="{{id}}" type="checkbox" {{#if Completed}}checked="checked"{{/if}}/>
                <span>{{Task}}</span>
            </div>
        </li>
     </script>
    
    <h3>Change completed state with the checkboxes</h3>
    <ul id="todoList"></ul>
    
    <h3>Change filter</h3>
    <form>
        <input type="checkbox" name="showCompleted" 
            checked data-filter-completed/> Show completed <br />
        Filter: <input type="text" class="search" data-filter-task />
    </form>
    
        
    <div id="networkMessage"></div>
</body>

CSS

body {
    font-family: 'Calibri';
}

ul { margin-left: 15px; }

h3 {
    margin-top:15px;
    font-weight:bold;
}

input[type=submit] {width:80px;height:25px}
input[type=text] {width:280px;height:25px}

form { margin-left:15px; margin-top:15px}

.search { width:150px !important}

JavaScript

var oldProcessor = $data.Entity.inheritedTypeProcessor;
        var templateCache = {};
        
        function getTemplate(templateName) {
            return templateCache[templateName] || (templateCache[templateName] = Handlebars.compile($('#'+ templateName).html()));
        }
        $data.Entity.inheritedTypeProcessor = function(type) {
            if (oldProcessor) {
                oldProcessor(type);
            }
            type.prototype.renderTo = function(selector, templateName, renderMode) {
                if (!renderMode) {
                    renderMode = "append";
                }
                if (!templateName) {
                    var sname = $data.Container.resolveName(this.getType()).split(".");
                    var name = sname[sname.length - 1];
                    templateName = name;
                }
                var template = getTemplate(templateName);
                if ("replace" == renderMode) {
                    $(selector).empty();
                }
                $(selector).append(template(this));
            }
        }
        
        $data.Queryable.prototype.renderTo = function(selector, renderMode, templateName) {
                renderMode = renderMode || "replace";
                
            if (!templateName) {
                var sname = $data.Container.resolveName(this.defaultType).split(".");
                var name = sname[sname.length - 1];
                templateName = name;
            }
            var template = getTemplate(templateName); 
            return this.toArray().then(function(items) {
                var result = [];
                if ("replace" == renderMode) {
                    $(selector).empty();
                }
                items.forEach(function(item) {
                  var res = $(selector).append(template(item));
                    result.push(res);
                });
                var d = new $.Deferred();
                return d.resolve(items, result);
   ...