added backbone work as separate files

code-bb.js

@@ -0,0 +1,214 @@
+
+
+$(function(){
+
+
+// plt Model
+// ----------
+window.Plt = Backbone.Model.extend({
+
+ // Default attributes for the todo.
+ defaults: {
+ name: 'Empty plt',
+ To: '[email protected]',
+ Subject: 'Empty subject..',
+ Body: 'Empty body'
+ },
+
+ // initize each plt
+ initialize: function() {
+ if (!this.get("name")) {
+ this.set({"name": this.defaults.name});
+
+ }
+ },
+
+ // Remove this from *localStorage* and delete its view.
+ clear: function() {
+ this.destroy();
+ this.view.remove();
+ }
+
+});
+
+
+// plt Collection
+// ---------------
+
+// The collection of plts is backed by *localStorage* instead of a remote
+// server.
+window.PltList = Backbone.Collection.extend({
+
+ // Reference to this collection's model.
+ model: Plt,
+
+ // Save all of the plts items under the `"pltz"` namespace.
+ localStorage: new Store("pltz"),
+
+
+ // We keep the pltz in sequential order, despite being saved by unordered
+ // GUID in the database. This generates the next order number for new items.
+ nextOrder: function() {
+ if (!this.length) return 1;
+ return this.last().get('order') + 1;
+ },
+
+ // Todos are sorted by their original insertion order.
+ comparator: function(plt) {
+ return plt.get('order');
+ }
+
+});
+
+// Create our global collection of **pltz**.
+window.Pltz = new PltList;
+
+// Todo Item View
+// --------------
+
+// The DOM element for a todo item...
+window.PltView = Backbone.View.extend({
+
+
+ // Backbone view element definitions
+ tagName: "li",
+ className: "plt",
+
+ // Cache the template function for a single item.
+ template: _.template($('#item-template').html()),
+
+ // The DOM events specific to an item.
+ events: {
+ "click .pltEdit" : "edit"
+ // "click span.todo-destroy" : "clear",
+ // "keypress .todo-input" : "updateOnEnter"
+ },
+
+ // The TodoView listens for changes to its model, re-rendering. Since there's
+ // a one-to-one correspondence between a **Todo** and a **TodoView** in this
+ // app, we set a direct reference on the model for convenience.
+ initialize: function() {
+ this.model.view = this;
+ //this.model.save({name: "hello"});
+ },
+
+ // Re-render the contents of the todo item.
+ render: function() {
+ $(this.el).html(this.template(this.model.toJSON()));
+ //this.setContent();
+ return this;
+ },
+
+ // I think I'm doing this in the template, so no here.
+ // To avoid XSS (not that it would be harmful in this particular app),
+ // we use `jQuery.text` to set the contents of the todo item.
+ //setContent: function() {
+ // var content = this.model.get('content');
+ // this.$('.todo-content').text(content);
+ //},
+
+
+ // Switch this view into `"editing"` mode, displaying the input field.
+ edit: function() {
+ $.mobile.changePage('edit','pop');
+ var thisPlt = this.model;
+ var plt = this.model.toJSON();
+ jQuery.each(plt, function(k, v){
+ if (k === 'type') {
+ $('input[value="' + plt[k] + '"]').attr("checked",true);
+ }
+ else {
+ var element = '#' + k;
+ $(element).val(plt[k]);
+ }
+ });
+ $("input[type='radio']").checkboxradio("refresh");
+
+
+ $('form#edit').submit(function() {
+ event.preventDefault();
+ var fields = $(this).serializeArray();
+ jQuery.each(fields, function(i, field){
+ var name = field.name;
+ plt[name] = field.value;
+ });
+
+ // TODO should I use save or not?
+ thisPlt.save(plt);
+ // TODO we have a page refresh issue.
+ $.mobile.changePage('list','pop',true);
+ return false;
+ });
+ },
+
+ // Close the `"editing"` mode, saving changes to the todo.
+ close: function() {
+ this.model.save({content: this.input.val()});
+ $(this.el).removeClass("editing");
+ },
+
+ // If you hit `enter`, we're through editing the item.
+ updateOnEnter: function(e) {
+ if (e.keyCode == 13) this.close();
+ },
+
+ // Remove this view from the DOM.
+ remove: function() {
+ $(this.el).remove();
+ },
+
+ // Remove the item, destroy the model.
+ clear: function() {
+ this.model.clear();
+ }
+
+});
+
+
+// The Application
+ // ---------------
+
+ // Our overall **AppView** is the top-level piece of UI.
+ window.AppView = Backbone.View.extend({
+
+
+ // Instead of generating a new element, bind to the existing skeleton of
+ // the App already present in the HTML.
+ el: $("#list"),
+
+
+ // At initialization we bind to the relevant events on the `Todos`
+ // collection, when items are added or changed. Kick things off by
+ // loading any preexisting todos that might be saved in *localStorage*.
+ initialize: function() {
+
+ _.bindAll(this, 'addOne', 'addAll');
+
+
+ Pltz.bind('add', this.addOne);
+ Pltz.bind('refresh', this.addAll);
+
+ Pltz.fetch();
+ //Pltz.add([{name: 'hello'}]);
+
+ },
+
+
+ // Add a single todo item to the list by creating a view for it, and
+ // appending its element to the `<ul>`.
+ addOne: function(plt) {
+ var view = new PltView({model: plt});
+ this.$('#templateList').append(view.render().el);
+ },
+
+ // Add all items in the **Todos** collection at once.
+ addAll: function() {
+ Pltz.each(this.addOne);
+ },
+
+ });
+
+ // Finally, we kick things off by creating the **App**.
+ window.App = new AppView;
+
+});

index-bb.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>lone empltz</title>
+ <link rel="stylesheet" href="http:https://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
+ <link rel="stylesheet" href="custom.css" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+ <script src="http:https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+ <script src="support/underscore-1.1.6-min.js"></script>
+ <script src="support/backbone-0.3.3.js"></script>
+ <script src="support/backbone-localstorage.js"></script>
+ <script src="code-bb.js"></script>
+ <script src="http:https://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
+ </head>
+ <body>
+
+
+ <!-- Start of first page -->
+
+<div data-role="page" id="list" class="swipedelete" data-theme="d">
+
+ <div data-role="header">
+ <h1>empltz</h1>
+ <a id="addButton" href="#add" data-rel="dialog" data-icon="plus" class="ui-btn-right" data-iconpos="notext">Add</a>
+ </div><!-- /header -->
+
+
+ <div data-role="content"> 
+ <ul id="templateList" data-role="listview" data-inset="true" data-split-icon="gear">
+
+ </ul>
+ <p><b>hint:</b> Swipe to delete </p>
+
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+<!-- Start of second page -->
+<div data-role="page" id="edit">
+
+ <div data-role="header">
+ <h1>Edit</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <form id="edit" method="get" action="" accept-charset="utf-8">
+ <div id="editForm" data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Type:</legend>
+ <input type="radio" name="type" id="type-1" value="mailto" checked="checked"/>
+ <label for="type-1">Email</label>
+ <input type="radio" name="type" id="type-2" value="sms" />
+ <label for="type-2">SMS</label>
+ </fieldset>
+ <label for="name">Label:</label>
+ <input type="text" name="name" id="name" value="" />
+ <label for="To">To:</label>
+ <input type="text" name="to" id="To" value="" />
+ <label for="Subject">Subject:</label>
+ <input type="text" name="subject" id="Subject" value="" />
+ <label for="Body">Body:</label>
+ <input type="text" name="body" id="Body" value="" />
+
+ </div>
+ <button type="submit" value="Save" data-theme="a" >Save</button>
+ </form>
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+<!-- Start of second page -->
+<div data-role="page" id="add">
+
+ <div data-role="header">
+ <h1>Add</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <form id="add" method="get" action="" accept-charset="utf-8">
+ <div id="addForm" data-role="fieldcontain">
+ </div>
+ <button type="submit" value="Save" data-theme="a" >Save</button>
+ </form>
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+<!-- Templates -->
+
+ <script type="text/template" id="item-template">
+ <a href=<%= name %> > <%= name %> </a> <a class="pltEdit" href="#edit" data-rel="dialog" data-transition="pop" rel="external"></a>
+ </script>
+
+ <script type="text/template" id="stats-template">
+ <% if (total) { %>
+ <span class="todo-count">
+ <span class="number"><%= remaining %></span>
+ <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
+ </span>
+ <% } %>
+ <% if (done) { %>
+ <span class="todo-clear">
+ <a href="#">
+ Clear <span class="number-done"><%= done %></span>
+ completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
+ </a>
+ </span>
+ <% } %>
+ </script>
+
+ </body>
+
+
+</html>