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

   1 (function(){
   2
   3 window.SliverView = Backbone.View.extend({
   4     tagName: 'li',
   5     className: '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.ListView = Backbone.View.extend({
  44     initialize: function(){
  45         _.bindAll(this, 'addOne', 'addAll');
  46
  47         this.collection.bind('add', this.addOne);
  48         this.collection.bind('reset', this.addAll, this);
  49         this.views = [];
  50     },
  51
  52     addAll: function(){
  53         this.views = [];
  54         this.collection.each(this.addOne);
  55     },
  56
  57     addOne: function(sliver){
  58         var view = new SliverView({
  59             model: sliver
  60         });
  61         $(this.el).prepend(view.render().el);
  62         this.views.push(view);
  63         view.bind('all', this.rethrow, this);
  64     },
  65
  66     rethrow: function(){
  67         this.trigger.apply(this, arguments);
  68     }
  69
  70 });
  71
  72 window.ListApp = Backbone.View.extend({
  73     el: "#app",
  74
  75     rethrow: function(){
  76         this.trigger.apply(this, arguments);
  77     },
  78
  79     render: function(){
  80         console.log("listApp.render");
  81         console.log(this.collection);
  82         $(this.el).html(ich.listApp({}));
  83         var list = new ListView({
  84             collection: this.collection,
  85             el: this.$('#slivers')
  86         });
  87         list.addAll();
  88         list.bind('all', this.rethrow, this);
  89     }
  90 });
  91
  92
  93 window.Router = Backbone.Router.extend({
  94     routes: {
  95         '': 'list',
  96         ':id/': 'detail'
  97     },
  98
  99     navigate_to: function(model){
 100         var path = (model && model.get('id') + '/') || '';
 101         console.log("Router.navigate_to");
 102         this.navigate(path, true);
 103     },
 104
 105     detail: function(){ console.log("Router.detail"); },
 106
 107     list: function(){ console.log("Router.list"); }
 108 });
 109
 110 $(function(){
 111     window.app = window.app || {};
 112     app.router = new Router();
 113     app.slivers = xos.slivers; //new XOSLib.slivers();
 114     app.list = new ListApp({
 115         el: $("#app"),
 116         collection: app.slivers
 117     });
 118     app.detail = new DetailApp({
 119         el: $("#app")
 120     });
 121     app.router.bind('route:list', function(){
 122         app.slivers.maybeFetch({
 123             success: _.bind(app.list.render, app.list)
 124         });
 125     });
 126     app.router.bind('route:detail', function(id){
 127         app.slivers.getOrFetch(app.slivers.urlRoot + id + '/', {
 128             success: function(model){
 129                 app.detail.model = model;
 130                 app.detail.render();
 131             }
 132         });
 133     });
 134
 135     app.slivers.maybeFetch({
 136         success: _.bind(app.list.render, app.list)
 137     });
 138
 139     app.list.bind('navigate', app.router.navigate_to, app.router);
 140     app.detail.bind('home', app.router.navigate_to, app.router);
 141     Backbone.history.start({
 142         pushState: true,
 143         silent: app.loaded
 144     });
 145 });
 146 })();