pinboxing 101

nerdy starting point for building pinbox

by mgrassotti

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs-addons/ember-bootstrap/ember-bootstrap-0.0.1.js"></script>
<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
<!doctype html>
<html lang="en">
<head>
  <title>pinboxing 101</title>
  <link rel="stylesheet" href="http://demo.redroverhq.com/stylesheets/bootstrap.css">
  <link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
</head>
<script type="text/x-handlebars" data-template-name="application">
  <a {{action showAllHashtags}}>pinboxing 101</a> |
  {{outlet searchbox}}
  {{controller.controllers.searchController.selectedHashtag.login}}
  <hr/>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="hashtags">
  {{#each hashtag in controller}}
    <a {{action showHashtag hashtag href="true"}}>#{{hashtag.login}} </a>
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="a-hashtag">
  <hr/>
  {{login}} - {{contributions}} items
</script>

<body></body>
</html>

CoffeeScript

App = Ember.Application.create()
App.ApplicationView = Ember.View.extend(templateName: "application")
App.ApplicationController = Ember.Controller.extend()
App.Hashtag = Ember.Object.extend()
App.Hashtag.reopenClass
  allHashtags: []
  find: ->
    $.ajax
      url: "https://api.github.com/repos/emberjs/ember.js/contributors"
      dataType: "jsonp"
      context: this
      success: (response) ->
        response.data.forEach ((hashtag) ->
          @allHashtags.addObject App.Hashtag.create(hashtag)
        ), this

    @allHashtags

App.HashtagSelectorView = Ember.Select.extend()
App.SearchController = Ember.ArrayController.extend({})
App.SearchView = Ember.Select.extend
  contentBinding: "controller.controllers.searchController.content"
  optionLabelPath: "content.login"
  optionValuePath: "content.login"
  prompt: "Search"
  didInsertElement: ->
    console.log "App.SearchView.didInsertElement"
    @$().chosen()

  
  #        console.log("App.SearchView.contentChanged!");
  #        console.log(this.$());
  contentDidChange: ->
    Em.run.next this, ->
      @$().trigger "liszt:updated"

  .observes("content.@each")

App.AllHashtagsController = Ember.ArrayController.extend()
App.AllHashtagsView = Ember.View.extend(templateName: "hashtags")
App.OneHashtagView = Ember.View.extend(templateName: "a-hashtag")
App.OneHashtagController = Ember.ObjectController.extend()

#
#
#App.AllHashtagsController = Ember.ArrayController.extend({
#    selectedHashtag: null,
#  selectedHashtagId: null,
#});
#
#App.AllHashtagsView = Ember.View.extend({
#  templateName: 'hashtags',
#  selectionDidChange: function() {
#    console.log("App.AllHashtagsView.selectionDidChange");
#    selection = this.get('controller.selectedHashtag');
#    console.log('selection is:', selection);
#
#    ctarget = this.get('controller.target')
#    console.log('controller target is:', ctarget.toString());
#    console.log(Em.inspect(ctarget));
#    if (!Em.empty(selection)) {
#     ...