JSFiddle - React, Tailwind, and code Playground

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>Ember and Masonry</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}}>Red Rover</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">
  <div>
    
  </div>
  <hr/>
  {{login}} - {{contributions}} items
</script>

<body></body>
</html>

JavaScript

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: function(){
    $.ajax({
      url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
      dataType: 'jsonp',
      context: this,
      success: function(response){
        response.data.forEach(function(hashtag){
          this.allHashtags.addObject(App.Hashtag.create(hashtag))
        }, this)
      }
    })
    return 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: function(){
      console.log("App.SearchView.didInsertElement");
      this.$().chosen();
    },
    contentDidChange: function(){
      Em.run.next(this, function(){
//        console.log("App.SearchView.contentChanged!");
//        console.log(this.$());
        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:',...