deck builder ok

assets/javascripts/decks.coffee

@@ -6,21 +6,30 @@ class Card extends Spine.Model
   @url: "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead"
   @locale_url: "https://api.mongolab.com/api/1/databases/mycard/collections/lang_#{locale}?apiKey=508e5726e4b0c54ca4492ead"
   @query: (q, callback)->
-    $.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) ->
+    $.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) =>
       cards_id = (card._id for card in cards)
-      $.getJSON "#{Card.locale_url}&q=#{JSON.stringify({_id: { $in: cards_id}})}", (langs) ->
-        @model.refresh (new Card(lang) for lang in langs
-          id = lang["id"] = lang["_id"]
+      $.getJSON "#{@locale_url}&q=#{JSON.stringify({_id: { $in: cards_id}})}", (langs) =>
+        cards = (for lang in langs
+          id = lang.id = lang._id
           for card in cards
-            if card["_id"] == id
+            if card._id == id
               $.extend(lang, card)
               break
+          lang
         )
+        @refresh cards
+        callback(cards)
 
 class CardUsage extends Spine.Model
   @configure "CardUsage", "card_id", "count", "side"
+  @belongsTo 'card', Card
 
-
+class Deck extends Spine.Controller
+  constructor: ->
+    super
+    CardUsage.bind("refresh change", @render)
+  render: =>
+    @html $("#card_template").tmpl(CardUsage.all())
 
 decode = (str)->
 	key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-="
@@ -42,9 +51,9 @@ for i in [0...cards_encoded.length] by 5
   count = decoded >> 27 & 0x3
   id = decoded & 0x07FFFFFF
   cards_id.push id
-  deck.push<< {card_id: id, count: count, side: side}
+  deck.push {card_id: id, count: count, side: side}
   $('#cards').append($('<dt />', {text: id}))
   $('#cards').append($('<dd />', {text: count}))
-
-Card.query {_id: { $in: cards_id}}
-Card.bind "refresh",
+a = new Deck(el: $("#deck"))
+Card.query {_id: { $in: cards_id}}, =>
+  CardUsage.refresh deck
\ No newline at end of file

assets/javascripts/decks.js

 // Generated by CoffeeScript 1.4.0
 (function() {
-  var Card, cards_encoded, cards_id, count, deck, decode, decoded, i, id, locale, side, _i, _ref,
+  var Card, CardUsage, Deck, a, cards_encoded, cards_id, count, deck, decode, decoded, i, id, locale, side, _i, _ref,
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    _this = this;
 
   locale = 'zh';
 
@@ -25,6 +27,7 @@
     Card.locale_url = "https://api.mongolab.com/api/1/databases/mycard/collections/lang_" + locale + "?apiKey=508e5726e4b0c54ca4492ead";
 
     Card.query = function(q, callback) {
+      var _this = this;
       return $.getJSON("" + this.url + "&q=" + (JSON.stringify(q)), function(cards) {
         var card, cards_id;
         cards_id = (function() {
@@ -36,25 +39,31 @@
           }
           return _results;
         })();
-        return $.getJSON("" + Card.locale_url + "&q=" + (JSON.stringify({
+        return $.getJSON("" + _this.locale_url + "&q=" + (JSON.stringify({
           _id: {
             $in: cards_id
           }
         })), function(langs) {
-          var id, lang, _i, _j, _len, _len1;
-          for (_i = 0, _len = langs.length; _i < _len; _i++) {
-            lang = langs[_i];
-            id = lang["id"] = lang["_id"];
-            for (_j = 0, _len1 = cards.length; _j < _len1; _j++) {
-              card = cards[_j];
-              if (card["_id"] === id) {
-                $.extend(lang, card);
-                break;
+          var id, lang;
+          cards = (function() {
+            var _i, _j, _len, _len1, _results;
+            _results = [];
+            for (_i = 0, _len = langs.length; _i < _len; _i++) {
+              lang = langs[_i];
+              id = lang.id = lang._id;
+              for (_j = 0, _len1 = cards.length; _j < _len1; _j++) {
+                card = cards[_j];
+                if (card._id === id) {
+                  $.extend(lang, card);
+                  break;
+                }
               }
+              _results.push(lang);
             }
-            (new Card(lang)).save;
-          }
-          return alert(Card.first());
+            return _results;
+          })();
+          _this.refresh(cards);
+          return callback(cards);
         });
       });
     };
@@ -63,6 +72,40 @@
 
   })(Spine.Model);
 
+  CardUsage = (function(_super) {
+
+    __extends(CardUsage, _super);
+
+    function CardUsage() {
+      return CardUsage.__super__.constructor.apply(this, arguments);
+    }
+
+    CardUsage.configure("CardUsage", "card_id", "count", "side");
+
+    CardUsage.belongsTo('card', Card);
+
+    return CardUsage;
+
+  })(Spine.Model);
+
+  Deck = (function(_super) {
+
+    __extends(Deck, _super);
+
+    function Deck() {
+      this.render = __bind(this.render, this);
+      Deck.__super__.constructor.apply(this, arguments);
+      CardUsage.bind("refresh change", this.render);
+    }
+
+    Deck.prototype.render = function() {
+      return this.html($("#card_template").tmpl(CardUsage.all()));
+    };
+
+    return Deck;
+
+  })(Spine.Controller);
+
   decode = function(str) {
     var char, key, result, _i, _len;
     key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-=";
@@ -91,11 +134,11 @@
     count = decoded >> 27 & 0x3;
     id = decoded & 0x07FFFFFF;
     cards_id.push(id);
-    deck.push << {
+    deck.push({
       card_id: id,
       count: count,
       side: side
-    };
+    });
     $('#cards').append($('<dt />', {
       text: id
     }));
@@ -104,10 +147,16 @@
     }));
   }
 
+  a = new Deck({
+    el: $("#deck")
+  });
+
   Card.query({
     _id: {
       $in: cards_id
     }
+  }, function() {
+    return CardUsage.refresh(deck);
   });
 
 }).call(this);

decks/index.html

@@ -14,21 +14,21 @@
 
     <link rel="stylesheet" href="/assets/stylesheets/normalize.css">
     <script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>
-
+    <script id="card_template" type="text/x-jquery-tmpl">
+        <div id="deck_{{if side}}side{{else}}main{{/if}}_${card_id}"></div>
+        <span>${$data.card().name}</span>
+        <span>${count}</span>
+    </script>
 </head>
 <body>
-<!--[if lt IE 7]>
+<!--[if lt IE 8]>
 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
 <![endif]-->
 
 <!-- Add your site or application content here -->
 <img id="qrcode" src="http://google.com/">
 <div id="name"></div>
-<dl id="cards">
-    <div id="card_template">
-        
-    </div>
-</dl>
+<dl id="deck"></dl>
 
 
 <script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
@@ -36,6 +36,9 @@
 <script src="/vendor/javascripts/json2.js"></script>
 <script src="/vendor/javascripts/spine/spine.js"></script>
 <script src="/vendor/javascripts/spine/ajax.js"></script>
+<script src="/vendor/javascripts/spine/relation.js"></script>
+<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
+
 <script src="/assets/javascripts/decks.js"></script>
 
 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->