k33g · December 8, 2011 17:04
diff --git a/bob.html b/bob.html
 <body>

    <h1>TODO LIST</h1>

    <!-- MESSAGE VIEW -->
    <script type="text/template" id="message_template">
        <h2>#{message}</h2>
    </script>

    <div id="message_view"></div>
    <!-- END MESSAGE VIEW -->

    <input id="field01" type="text" placeholder="Task Id"/>
    <input id="field02" type="text" placeholder="TODO ?"/> <a href="#Tasks/saveTask">Create Task</a>
    <hr>
    <a href="#Tasks/sortByLabel">Sort By Label</a>
    <a href="#Tasks/sortDescByLabel">Sort By Label, Descending</a>
    <a href="#Tasks/sortById">Sort By Id</a>
    <a href="#Tasks/sortDescById">Sort By Id, Descending</a>
    <hr>

    <!-- TASKS LIST VIEW -->
    <script type="text/template" id="tasks_template">
        <h2 data-test="#{title}">#{title}</h2>

        <ul loop="tasks">
            <li>#{numericalId} - #{label} #{id}   <a data-test="#{id}" href="#Tasks/remove?id=#{id}" data-try="#{id}">Delete</a></li>
        </ul>


    </script>

    <div id="tasks_view"></div>
    <!-- END TASKS LIST VIEW -->
 </body>


 <script type="text/javascript" src="../../js/bob.js"></script>
 <!--<script src="js/modules/bob.extModels.js"></script>-->


 <script type="text/javascript">
    var fieldId, fieldLabel;

    /*--- MODEL ---*/
    var Task = bob.Class({
        Extends     : bob.Model,
        $storage    : "Tasks_Storage",
        $service    : "/php-bob/crud.php",
        
        constructor : function Task(label) {
            this.label = label;
            this.numericalId = 0;
        }
    });

    /*--- CONTROLLER ---*/
    var Tasks = bob.Class({

        $sortByLabel : function() {
            this.render({
                data :{
                    tasks: Task.all().orderBy("label").fetch(),
                    title : "Tasks List"
                },
                template : "tasks_template",
                view : "tasks_view"
            });
        },
        $sortDescByLabel : function() {
            this.render({
                data :{
                    tasks: Task.all().orderBy("label","DESC").fetch(),
                    title : "Tasks List"
                },
                template : "tasks_template",
                view : "tasks_view"
            });
        },
        $sortById : function() {
            this.render({
                data :{
                    tasks: Task.all().orderBy("numericalId").fetch(),
                    title : "Tasks List"
                },
                template : "tasks_template",
                view : "tasks_view"
            });
        },
        $sortDescById : function() {
            this.render({
                data :{
                    tasks: Task.all().orderBy("numericalId","DESC").fetch(),
                    title : "Tasks List"
                },
                template : "tasks_template",
                view : "tasks_view"
            });
        },
        $getList : function() {
            this.render({
                data :{
                    tasks: Task.all().orderBy("label","DESC").fetch(),
                    title : "Tasks List"
                },
                template : "tasks_template",
                view : "tasks_view"
            });
        },

        $saveTask : function() {
            var task = new Task(fieldLabel.value);
            task.numericalId = parseInt(fieldId.value);
            task.save(); /* call back is optional */

            this.render({
                data : { message : '"'+task.label+'" has been saved ...' },
                template : "message_template",
                view : "message_view"
            });
            Tasks.callAction('Tasks/getList');
            fieldId.value = "";
            fieldLabel.value = "";
        },

        $remove : function (arg) {
            var task = Task.find("id",arg.id).fetch().first(); /*first*/
            if(task) {
                this.render({
                    data : { message : task.label + " deleted" },
                    template : "message_template",
                    view : "message_view"
                });

                task.delete(function(key){console.log(key," has been deleted");});
                this.callAction('Tasks/getList');
            }
        }

    });

    bob.ready(/* run function when doc is loaded */
        function() {
            Task.loadAll(); /*from local storage*/

            fieldId = document.querySelector('input:nth-of-type(1)');
            fieldLabel = document.querySelector('input:nth-of-type(2)');

            //define routes
            bob.routes({
                /*default*/
                "/" : function() {
                    //message.innerHTML = "Welcome Home !";
                    Tasks.getList();
                }
            });

    });

 </script>
	<body>

	<h1>TODO LIST</h1>

	<!-- MESSAGE VIEW -->
	<script type="text/template" id="message_template">
	<h2>#{message}</h2>
	</script>

	<div id="message_view"></div>
	<!-- END MESSAGE VIEW -->

	<input id="field01" type="text" placeholder="Task Id"/>
	<input id="field02" type="text" placeholder="TODO ?"/> <a href="#Tasks/saveTask">Create Task</a>
	<hr>
	<a href="#Tasks/sortByLabel">Sort By Label</a>
	<a href="#Tasks/sortDescByLabel">Sort By Label, Descending</a>
	<a href="#Tasks/sortById">Sort By Id</a>
	<a href="#Tasks/sortDescById">Sort By Id, Descending</a>
	<hr>

	<!-- TASKS LIST VIEW -->
	<script type="text/template" id="tasks_template">
	<h2 data-test="#{title}">#{title}</h2>

	<ul loop="tasks">
	<li>#{numericalId} - #{label} #{id} <a data-test="#{id}" href="#Tasks/remove?id=#{id}" data-try="#{id}">Delete</a></li>
	</ul>


	</script>

	<div id="tasks_view"></div>
	<!-- END TASKS LIST VIEW -->
	</body>


	<script type="text/javascript" src="../../js/bob.js"></script>
	<!--<script src="js/modules/bob.extModels.js"></script>-->


	<script type="text/javascript">
	var fieldId, fieldLabel;

	/--- MODEL ---/
	var Task = bob.Class({
	Extends : bob.Model,
	$storage : "Tasks_Storage",
	$service : "/php-bob/crud.php",

	constructor : function Task(label) {
	this.label = label;
	this.numericalId = 0;
	}
	});

	/--- CONTROLLER ---/
	var Tasks = bob.Class({

	$sortByLabel : function() {
	this.render({
	data :{
	tasks: Task.all().orderBy("label").fetch(),
	title : "Tasks List"
	},
	template : "tasks_template",
	view : "tasks_view"
	});
	},
	$sortDescByLabel : function() {
	this.render({
	data :{
	tasks: Task.all().orderBy("label","DESC").fetch(),
	title : "Tasks List"
	},
	template : "tasks_template",
	view : "tasks_view"
	});
	},
	$sortById : function() {
	this.render({
	data :{
	tasks: Task.all().orderBy("numericalId").fetch(),
	title : "Tasks List"
	},
	template : "tasks_template",
	view : "tasks_view"
	});
	},
	$sortDescById : function() {
	this.render({
	data :{
	tasks: Task.all().orderBy("numericalId","DESC").fetch(),
	title : "Tasks List"
	},
	template : "tasks_template",
	view : "tasks_view"
	});
	},
	$getList : function() {
	this.render({
	data :{
	tasks: Task.all().orderBy("label","DESC").fetch(),
	title : "Tasks List"
	},
	template : "tasks_template",
	view : "tasks_view"
	});
	},

	$saveTask : function() {
	var task = new Task(fieldLabel.value);
	task.numericalId = parseInt(fieldId.value);
	task.save(); /* call back is optional */

	this.render({
	data : { message : '"'+task.label+'" has been saved ...' },
	template : "message_template",
	view : "message_view"
	});
	Tasks.callAction('Tasks/getList');
	fieldId.value = "";
	fieldLabel.value = "";
	},

	$remove : function (arg) {
	var task = Task.find("id",arg.id).fetch().first(); /first/
	if(task) {
	this.render({
	data : { message : task.label + " deleted" },
	template : "message_template",
	view : "message_view"
	});

	task.delete(function(key){console.log(key," has been deleted");});
	this.callAction('Tasks/getList');
	}
	}

	});

	bob.ready(/* run function when doc is loaded */
	function() {
	Task.loadAll(); /from local storage/

	fieldId = document.querySelector('input:nth-of-type(1)');
	fieldLabel = document.querySelector('input:nth-of-type(2)');

	//define routes
	bob.routes({
	/default/
	"/" : function() {
	//message.innerHTML = "Welcome Home !";
	Tasks.getList();
	}
	});

	});

	</script>