--- /dev/null
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <span class="brand">Contact manager</span>
+ </div>
+ </div>
+ </div>
+
+ <div id="main-region" class="container">
+ <p>Here is static content in the web page. You'll notice that it gets replaced by our app as soon as we start it.</p>
+ </div>
+
+ <script type="text/template" id="contact-list-item">
+ <p><%- firstName %> <%- lastName %></p>
+ </script>
+
+<script src="{{ STATIC_URL }}/js/vendor/underscore-min.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.wreqr.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.babysitter.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.marionette.js"></script>
+<script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/gentle.js"></script>
+
+
</div>
<link rel="stylesheet" type="text/css" href="{% static 'shell/opencloud_shell.css' %}" media="all">
- <script src="{{ STATIC_URL }}/js/underscore-min.js"></script>
- <script src="{{ STATIC_URL }}/js/backbone-min.js"></script>
- <script src="{{ STATIC_URL }}/js/ICanHaz.min.js"></script>
- <script src="{{ STATIC_URL }}/js/xos-backbone.js"></script>
- <script src="{% static 'xsh/xsh.js' %}"></script>
- <script src="{% static 'xsh/object_id.js' %}"></script>
- <script src="{% static 'xsh/constants.js' %}"></script>
- <script src="{% static 'xsh/utils.js' %}"></script>
- <script src="{% static 'xsh/shell_utils.js' %}"></script>
- <script src="{% static 'xsh/tokens.js' %}"></script>
+ <script src="{{ STATIC_URL }}/js/vendor/underscore-min.js"></script>
+ <script src="{{ STATIC_URL }}/js/vendor/backbone-min.js"></script>
+ <script src="{{ STATIC_URL }}/js/vendor/ICanHaz.min.js"></script>
+ <script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
+ <script src="{% static 'js/xsh/xsh.js' %}"></script>
+ <script src="{% static 'js/xsh/object_id.js' %}"></script>
+ <script src="{% static 'js/xsh/constants.js' %}"></script>
+ <script src="{% static 'js/xsh/utils.js' %}"></script>
+ <script src="{% static 'js/xsh/shell_utils.js' %}"></script>
+ <script src="{% static 'js/xsh/tokens.js' %}"></script>
+++ /dev/null
-MyApp = new Backbone.Marionette.Application();
-
-MyApp.addRegions({
- mainRegion: "#content"
-});
-
-AngryCat = Backbone.Model.extend({
- defaults: {
- votes: 0
- },
-
- addVote: function(){
- this.set('votes', this.get('votes') + 1);
- },
-
- rankUp: function() {
- this.set({rank: this.get('rank') - 1});
- },
-
- rankDown: function() {
- this.set({rank: this.get('rank') + 1});
- }
-});
-
-AngryCats = Backbone.Collection.extend({
- model: AngryCat,
-
- initialize: function(cats){
- var rank = 1;
- _.each(cats, function(cat) {
- cat.set('rank', rank);
- ++rank;
- });
-
- this.on('add', function(cat){
- if( ! cat.get('rank') ){
- var error = Error("Cat must have a rank defined before being added to the collection");
- error.name = "NoRankError";
- throw error;
- }
- });
-
- var self = this;
-
- MyApp.on("rank:up", function(cat){
- if (cat.get('rank') === 1) {
- // can't increase rank of top-ranked cat
- return true;
- }
- self.rankUp(cat);
- self.sort();
- self.trigger("reset");
- });
-
- MyApp.on("rank:down", function(cat){
- if (cat.get('rank') === self.size()) {
- // can't decrease rank of lowest ranked cat
- return true;
- }
- self.rankDown(cat);
- self.sort();
- self.trigger("reset");
- });
-
- MyApp.on("cat:disqualify", function(cat){
- var disqualifiedRank = cat.get('rank');
- var catsToUprank = self.filter(
- function(cat){ return cat.get('rank') > disqualifiedRank; }
- );
- catsToUprank.forEach(function(cat){
- cat.rankUp();
- });
- self.trigger('reset');
- });
- },
-
- comparator: function(cat) {
- return cat.get('rank');
- },
-
- rankUp: function(cat) {
- // find the cat we're going to swap ranks with
- var rankToSwap = cat.get('rank') - 1;
- var otherCat = this.at(rankToSwap - 1);
-
- // swap ranks
- cat.rankUp();
- otherCat.rankDown();
- },
-
- rankDown: function(cat) {
- // find the cat we're going to swap ranks with
- var rankToSwap = cat.get('rank') + 1;
- var otherCat = this.at(rankToSwap - 1);
-
- // swap ranks
- cat.rankDown();
- otherCat.rankUp();
- }
-});
-
-AngryCatView = Backbone.Marionette.ItemView.extend({
- template: "#angry_cat-template",
- tagName: 'tr',
- className: 'angry_cat',
-
- events: {
- 'click .rank_up img': 'rankUp',
- 'click .rank_down img': 'rankDown',
- 'click a.disqualify': 'disqualify'
- },
-
- initialize: function(){
- this.listenTo(this.model, "change:votes", this.render);
- },
-
- rankUp: function(){
- this.model.addVote();
- MyApp.trigger("rank:up", this.model);
- },
-
- rankDown: function(){
- this.model.addVote();
- MyApp.trigger("rank:down", this.model);
- },
-
- disqualify: function(){
- MyApp.trigger("cat:disqualify", this.model);
- this.model.destroy();
- }
-});
-
-AngryCatsView = Backbone.Marionette.CompositeView.extend({
- tagName: "table",
- id: "angry_cats",
- className: "table-striped table-bordered",
- template: "#angry_cats-template",
- itemView: AngryCatView,
-
- initialize: function(){
- this.listenTo(this.collection, "sort", this.renderCollection);
- },
-
- appendHtml: function(collectionView, itemView){
- collectionView.$("tbody").append(itemView.el);
- }
-});
-
-MyApp.addInitializer(function(options){
- var angryCatsView = new AngryCatsView({
- collection: options.cats
- });
- MyApp.mainRegion.show(angryCatsView);
-});
-
-$(document).ready(function(){
- var cats = new AngryCats([
- new AngryCat({ name: 'Wet Cat', image_path: 'assets/images/cat2.jpg' }),
- new AngryCat({ name: 'Bitey Cat', image_path: 'assets/images/cat1.jpg' }),
- new AngryCat({ name: 'Surprised Cat', image_path: 'assets/images/cat3.jpg' })
- ]);
-
- MyApp.start({cats: cats});
-
- cats.add(new AngryCat({
- name: 'Cranky Cat',
- image_path: 'assets/images/cat4.jpg',
- rank: cats.size() + 1
- }));
-});