JSFiddle - React, Tailwind, and code Playground

by kmalakoff

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="https://github.com/knockout/knockout/releases/download/v3.0.0/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="https://github.com/downloads/kmalakoff/knockback-inspector/knockback-inspector.css">
<script src="https://raw.github.com/kmalakoff/knockback/0.18.0/knockback.min.js"></script>
<script src="https://raw.github.com/kmalakoff/knockback-inspector/0.1.3/knockback-inspector.min.js"></script>
<div id='content'>
  <ul class='kbi root'><li class='kbi'>
    <fieldset class='kbi'>
      <label>URL</label>
      <input type='text' data-bind="value: url">
    </fieldset>
      
    <ul class='kbi' data-bind="template: {name: 'kbi_collection_node', data: kbi.nvm('root', true, collection)}"></ul>
  </li></ul>

  <p>
    <span>These users are tweeting about Knockback.js:</span>
    <ul data-bind="foreach: _.uniq(_.map(collection(), function(tweet) {return tweet.from_user(); }))">
      <li><a target='_blank' data-bind="attr: {href: 'https://twitter.com/' + $data }, text: '@' + $data"></a></li>
    </ul>
  </p>
  
  <p>Don't forget to <a target='_blank' href='http://kmalakoff.github.com/knockback/tutorial_inspector_library.html'>take a look at the tutorial</a> that shows how Knockback-Inspector was built and that shows how you can use it for your specialized Backbone.Models and Backbone.Collections including recursive relationships.</p>    

  <p><strong>Note:</strong> if your browser has strict same origin policy (like Google Chrome), you will see wishful thinking rather than real tweets! Try opening it in Firefox to see live data.</p>    
</div>

CSS

#content {background-color: #F5E0FF; border-radius: 5px;}

JavaScript

////////////////////////////////////////////////////////
// fake a response since some browsers like Chrome have strict same origin policies
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
  options.success({results: [{created_at: (new Date()).toString(), from_user: 'jashkenas', text: '#knockbackjs makes dynamic #backbonejs views easy!', metadata: {result_type: 'recent'}}, {created_at: (new Date()).toString(), from_user: 'stevensanderson', text: '#knockbackjs provides a great ORM to #knockoutjs', metadata: {result_type: 'recent'}}]})
});
////////////////////////////////////////////////////////
    
// tell Knockout about the 'kbi_node_view' and 'kbi_collection_view' templates
ko.setTemplateEngine(new kbi.TemplateEngine());
       
// create a model with a url and tweets collection
var   app_model = new Backbone.Model({url: '', collection: new kbi.FetchedCollection()});
var   view_model = kb.viewModel(app_model);

// when the url changes, refetch the collection    
view_model.url.subscribe(function(url){
  app_model.get('collection').url = url;
  app_model.get('collection').fetch();
});

// bind the view
ko.applyBindings(view_model);

// start with the knockbackjs tweets url
view_model.url('http://search.twitter.com/search.json?q=knockbackjs&callback=?');