planetstack/core/xoslib/static/js/sliverListTest.js

   1 (function(){
   2
   3 window.SliverView = Backbone.View.extend({
   4     tagName: 'li',
   5     className: 'XOSLib.sliver',
   6
   7     events: {
   8         'click .permalink': 'navigate'
   9     },
  10
  11     initialize: function(){
  12         this.model.bind('change', this.render, this);
  13     },
  14
  15     navigate: function(e){
  16         this.trigger('navigate', this.model);
  17         e.preventDefault();
  18     },
  19
  20     render: function(){
  21         $(this.el).html(ich.sliverTemplate(this.model.toJSON()));
  22         return this;
  23     }
  24 });
  25
  26
  27 window.DetailApp = Backbone.View.extend({
  28     events: {
  29         'click .home': 'home'
  30     },
  31
  32     home: function(e){
  33         this.trigger('home');
  34         e.preventDefault();
  35     },
  36
  37     render: function(){
  38         $(this.el).html(ich.detailApp(this.model.toJSON()));
  39         return this;
  40     }
  41 });
  42
  43 window.InputView = Backbone.View.extend({
  44     events: {
  45         'click .sliver': 'createSliver',
  46         'keypress #message': 'createOnEnter'
  47     },
  48
  49     createOnEnter: function(e){
  50         if((e.keyCode || e.which) == 13){
  51             this.createSliver();
  52             e.preventDefault();
  53         }
  54
  55     },
  56
  57     createSliver: function(){
  58         var message = this.$('#message').val();
  59         if(message){
  60             this.collection.create({
  61                 message: message
  62             });
  63             this.$('#message').val('');
  64         }
  65     }
  66
  67 });
  68
  69 window.ListView = Backbone.View.extend({
  70     initialize: function(){
  71         _.bindAll(this, 'addOne', 'addAll');
  72
  73         this.collection.bind('add', this.addOne);
  74         this.collection.bind('reset', this.addAll, this);
  75         this.views = [];
  76     },
  77
  78     addAll: function(){
  79         this.views = [];
  80         this.collection.each(this.addOne);
  81     },
  82
  83     addOne: function(sliver){
  84         var view = new SliverView({
  85             model: XOSLib.sliver
  86         });
  87         $(this.el).prepend(view.render().el);
  88         this.views.push(view);
  89         view.bind('all', this.rethrow, this);
  90     },
  91
  92     rethrow: function(){
  93         this.trigger.apply(this, arguments);
  94     }
  95
  96 });
  97
  98 window.ListApp = Backbone.View.extend({
  99     el: "#app",
 100
 101     rethrow: function(){
 102         this.trigger.apply(this, arguments);
 103     },
 104
 105     render: function(){
 106         console.log("listApp.render");
 107         $(this.el).html(ich.listApp({}));
 108         var list = new ListView({
 109             collection: this.collection,
 110             el: this.$('#slivers')
 111         });
 112         list.addAll();
 113         list.bind('all', this.rethrow, this);
 114         new InputView({
 115             collection: this.collection,
 116             el: this.$('#input')
 117         });
 118     }
 119 });
 120
 121
 122 window.Router = Backbone.Router.extend({
 123     routes: {
 124         '': 'list',
 125         ':id/': 'detail'
 126     },
 127
 128     navigate_to: function(model){
 129         var path = (model && model.get('id') + '/') || '';
 130         console.log("Router.navigate_to");
 131         this.navigate(path, true);
 132     },
 133
 134     detail: function(){ console.log("Router.detail"); },
 135
 136     list: function(){ console.log("Router.list"); }
 137 });
 138
 139 $(function(){
 140     window.app = window.app || {};
 141     app.router = new Router();
 142     app.slivers = new XOSLib.slivers();
 143     app.list = new ListApp({
 144         el: $("#app"),
 145         collection: app.slivers
 146     });
 147     app.detail = new DetailApp({
 148         el: $("#app")
 149     });
 150     app.router.bind('route:list', function(){
 151         console.log("Router:list2");
 152         app.slivers.maybeFetch({
 153             success: _.bind(app.list.render, app.list)
 154         });
 155     });
 156     app.router.bind('route:detail', function(id){
 157         console.log("Router:detail2");
 158         app.slivers.getOrFetch(app.slivers.urlRoot + id + '/', {
 159             success: function(model){
 160                 app.detail.model = model;
 161                 app.detail.render();
 162             }
 163         });
 164     });
 165
 166     app.slivers.maybeFetch({
 167         success: _.bind(app.list.render, app.list)
 168     });
 169
 170     app.list.bind('navigate', app.router.navigate_to, app.router);
 171     app.detail.bind('home', app.router.navigate_to, app.router);
 172     Backbone.history.start({
 173         pushState: true,
 174         silent: app.loaded
 175     });
 176 });
 177 })();