JSFiddle - React, Tailwind, and code Playground

by sid1404

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
</head>
<body>
<script type="text/x-handlebars"> 
    <h2>Welcome to Ember.js</h2>
	{{outlet}}
</script>
  

  
<script type="text/x-handlebars" id="index">

   {{view "select"
         contentBinding=articleStore
         optionLabelPath="content.title"
         optionValuePath="content.id"
		 prompt="Pick a person:"
		 selectionBinding=selected
		 valueBinding=articleValue}}
		 
		{{view "select"
         contentBinding=availableComment
         optionLabelPath="content.text"
         optionValuePath="content.id"
         prompt="related task:"
		 shouldReloadAll=true
		 valueBinding=articleValue}}
</script>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.13.7/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.13.7/ember.debug.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.13.7/ember-data.js"></script>
  <script src="js/amit_dropdown.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>
</html>

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.ArticleAdapter= DS.FixtureAdapter.extend({});
App.Article =DS.Model.extend({
	title: DS.attr(),
	body: DS.attr(),
	comments: DS.hasMany('comment', {async : true})
	//async tells compiler to load data from comment everytime this is rendered
});

App.Comment =DS.Model.extend({
	text: DS.attr(),
	article: DS.belongsTo('article', { async: true })
});


App.Article.FIXTURES=[ 
                  {
                	id:1,
                	title : 'Ember',
                	body:'Its a great technology but need lot of studying and practice',
                	comments:[1]
                  },{
                  	id:2,
                	title : 'Angular',
                	body:'it takes  less understanding but has more coding the ember',
                	comments:[2,3]
                  //this will be an aray coz it is has many relation
                  }
];

App.Comment.FIXTURES=[ 
                      {
                    	id:1,
                    	text : 'Yyyieee excited to learn ember',
                    	aricle: 1
                    	//its not an array coz it will be related to single object
                    },{
                      	id:2,
                    	text : 'I will start Angular once i have fininshed with ember',
                    	article: 2
                      },{
                       	id:3,
                       	text : 'Angular can be interesting',
                       	article: 2
                       }
    ];


App.CommentAdapter= DS.FixtureAdapter.extend();


App.IndexController = Ember.ArrayController.extend({
	
	articleValue: null,
	selected: null,
	
	articleStore: Em.computed(function(){
		console.log("data is : " + this.get('articleValue'));
		console.log("data is : " + this.get('selected'));
		 return this.store.findAll("article");
	}).property("selected"),
	
	
	
	  availableComment: Em.computed(function () {
        var make =...