JSFiddle - React, Tailwind, and code Playground

by Raj_Michaels

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/x-handlebars" id="application">
        <ul class="list-unstyled">
        {{#each content}}
            <li>
            <div class="checkbox">
                <label>
                  {{input type="checkbox" checked=isSelected}} {{name}}
                </label>
              </div>
            </li>
        {{/each}}
        <ul>
        Selected Contacts:
       <ul>
        {{#each selectedContacts}}
            <li>  {{name}}</li>
        {{/each}}
        <ul>
           
        
</script>

JavaScript

var App = Ember.Application.create({});

App.ApplicationController = Ember.ArrayController.extend({
    content: [
        { name: "Michael" },
        { name: "Bala" },
        { name: "Velmurugan" },
        { name: "raja" }
    ],
    selectedContacts: Em.computed.filterBy('content','isSelected')
});