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 />
        <div>Due date:</div>
        <input type="date" name="dueDate" />
        <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>
                <a href="#" data-remove-todo="{{id}}">remove</a>
            </div>
             {{#if DueDate}}<div>Due by: {{FmtDate}}</div>{{/if}}
        </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);
    });
};





var oldServiceMethod = $data.service;

$data.initService = function(apiKey, options) {
    var d = new $.Deferred();
    if (typeof options === 'function') {
        cbWithDatabase = options;
        options = undefined;
    };

    with(apiKey) {
        var url = "https://open.jaystack.net/" + ownerId + "/" + appId + "/api/" + serviceName;
    };

    var cb =...