Initial version of demo

mojotech · Sep 20, 2013 · 2ef1b20 · 2ef1b20
1 parent 34c8826
commit 2ef1b20
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 0 deletions.
diff --git a/Cakefile b/Cakefile
@@ -0,0 +1,21 @@
+cs = require('coffee-script')
+fs = require('fs')
+uglify = require('uglify-js')
+tmpl_precompile = require('tmpl-precompile')
+
+task 'build', 'compiles to source', ->
+  console.log 'Compiling source'
+  source = fs.readFileSync(__dirname + '/js/app.coffee', 'utf8')
+  compiled = cs.compile(source)
+  fs.writeFileSync(__dirname + '/js/app.min.js', uglify.minify(compiled, {fromString: 1}).code)
+
+  tmpl_precompile.precompile({
+    relative: true
+    groups: [
+      source: '/templates/'
+      output: '/templates.js'
+      namespace: 'Tmpl'
+      templates: ['repo_item']
+      uglify: false
+    ]
+  }, __dirname)
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Backbone Typeahead</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
+
+  </head>
+  <body>
+    <div class="container">
+      <h1>Backbone Typeahead</h1>
+      <div class="form-group">
+        <input class="form-control">
+      </div>
+      <!-- <div class="row">
+        <div class="col-xs-2">
+        </div>
+        <div class="col-xs-10"> -->
+          <div id="list">
+          </div>
+        <!-- </div>
+      </div> -->
+    </div>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.1.0-bundled/backbone.marionette.min.js"></script>
+    <script src="js/backbone.typeahead.min.js"></script>
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+    <script src="templates.js"></script>
+    <script src="js/app.min.js"></script>
+  </body>
+</html>
diff --git a/js/app.coffee b/js/app.coffee
@@ -0,0 +1,38 @@
+do (Backbone, Marionette, _, $) ->
+  class Repo extends Backbone.Model
+
+  class Repos extends Backbone.TypeaheadCollection
+    url: 'data/repos.json'
+    model: Repo
+    typeaheadAttributes: ['name', 'description', 'language']
+
+  class RepoItemView extends Marionette.ItemView
+    tagName: 'li'
+    className: 'list-group-item'
+    template: Tmpl.repo_item
+
+    hide: -> @$el.hide()
+    show: -> @$el.show()
+
+  class RepoListView extends Marionette.CollectionView
+    tagName: 'ul'
+    className: 'list-group'
+    itemView: RepoItemView
+
+    filter: (models) ->
+      @children.call 'hide'
+      @children.findByModel(model).show() for model in models
+
+  $ ->
+    view = null
+    repos = new Repos()
+
+    repos.fetch().done ->
+      view = new RepoListView(collection: repos, el: $('#list')[0])
+      view.render()
+
+    $('input').keyup (e) ->
+      query = $(this).val()
+      results = repos.typeahead(query)
+
+      view.filter results
diff --git a/js/app.min.js b/js/app.min.js
diff --git a/js/backbone.typeahead.min.js b/js/backbone.typeahead.min.js
diff --git a/templates.js b/templates.js
@@ -0,0 +1,61 @@
+(function(){window.Tmpl = window.Tmpl || {};
+function attrs(obj){
+  var buf = []
+    , terse = obj.terse;
+  delete obj.terse;
+  var keys = Object.keys(obj)
+    , len = keys.length;
+  if (len) {
+    buf.push('');
+    for (var i = 0; i < len; ++i) {
+      var key = keys[i]
+        , val = obj[key];
+      if ('boolean' == typeof val || null == val) {
+        if (val) {
+          terse
+            ? buf.push(key)
+            : buf.push(key + '="' + key + '"');
+        }
+      } else if ('class' == key && Array.isArray(val)) {
+        buf.push(key + '="' + escape(val.join(' ')) + '"');
+      } else {
+        buf.push(key + '="' + escape(val) + '"');
+      }
+    }
+  }
+  return buf.join(' ');
+}
+function escape(html){
+  return String(html)
+    .replace(/&(?!\w+;)/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+var jade = {
+  attrs: attrs,
+  escape: escape
+};
+Tmpl.repo_item = function anonymous(locals) {
+var attrs = jade.attrs, escape = jade.escape;
+var buf = [];
+with (locals || {}) {
+var interp;
+buf.push('<span');
+buf.push(attrs({ "class": ('badge') }));
+buf.push('>');
+var __val__ = language
+buf.push(escape(null == __val__ ? "" : __val__));
+buf.push('</span><h3>');
+var __val__ = name
+buf.push(escape(null == __val__ ? "" : __val__));
+buf.push('</h3><p');
+buf.push(attrs({ "class": ('muted') }));
+buf.push('>');
+var __val__ = description
+buf.push(escape(null == __val__ ? "" : __val__));
+buf.push('</p>');
+}
+return buf.join("");
+};
+})();
diff --git a/templates/repo_item.jade b/templates/repo_item.jade
@@ -0,0 +1,4 @@
+span.badge= language
+h3= name
+
+p.muted= description