JSFiddle - React, Tailwind, and code Playground

by viciousfish

HTML

<script src="http://libraries.azurewebsites.net/js/handlebars-1.0.0.js"></script>
<script src="http://libraries.azurewebsites.net/js/ember-1.0.0.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="http://whoismean.com/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://whoismean.com/chosen.css">
<body>
    <script type="text/x-handlebars" data-template-name="assets">        
     
        <p>this one is recieving a DS.promiseArray and doesn't work</p>
        {{controllers.tags.content.constructor}}
        {{view App.MultipleSelect
            contentBinding="controllers.tags.content"
            optionValuePath="content.id"
            optionLabelPath="content.name"
            valueBinding="selectedTag"
        }}                                
        <p><p>this one is receiving a regular array, and works fine</p>
        {{controllers.tags.contentTest.constructor}}
       {{view App.MultipleSelect
            contentBinding="controllers.tags.contentTest"
            optionValuePath="content.id"
            optionLabelPath="content.name"
            valueBinding="selectedTag"
        }}                                
        
        <table>
            <tr>
                <td>"ID"</td>
                <td>"Name"</td>
            </tr>
            {{#each assetsByTag}}
            <tr>
                <td>{{id}}</td>
                <td>{{name}}</td>
            </tr>
            {{/each}}
        </table>
    </script>
</body>

JavaScript

App = Ember.Application.create({
 ready: function() {
    console.log('App ready');
  }
});

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

//ROUTER
App.Router.map(function () {
  this.resource('assets', { path: '/' });
  this.resource('tags', { path: '/tags' });
});

//ROUTES
App.AssetsRoute = Ember.Route.extend({
  model: function () {
    return this.store.find('asset');
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    this.controllerFor('tags').set('content', this.store.find('tag') );
  }
});

//Tags Controller to load all tags for listing in select view
App.TagsController = Ember.ArrayController.extend({
 contentTest: [
		{name: "test1", id: 0},
		{name: "test2", id: 1},
		{name: "test3", id: 2}
	],   
});

App.AssetsController = Ember.ArrayController.extend({
  needs: ['tags'],
  selectedTag: null,
  assetsByTag: function() {      
      var selectedTag = this.get('selectedTag');
      var found = [];
      this.get('model').forEach(function(asset) {
          return asset.get('tags').forEach(function(tag) {
              if (tag.get('id') === selectedTag) {
                  found.pushObject(asset);
              }
          });
      });
      return found;
  }.property('selectedTag')
});
//CHOSEN MULTI SELECT HANDLER

App.MultipleSelect = Ember.Select.extend({
    multiple: false,
  	'data-placeholder': 'Filter List',
    style: 'width:200px',
	//classNames: ['uicontrol-multiple-select'], 
  	
    attributeBindings: [ 'multiple','data-placeholder','style' ],
  
    didInsertElement: function() {
      this._super();
      this.$().chosen();
    },
  
    selectionChanged: function() {
        this.$().trigger('chosen:updated');
    }.observes('selection')
});

//MODEL
App.Asset = DS.Model.extend({
    name: DS.attr('string'),
    tags: DS.hasMany('tag', { async: true })
});

App.Tag = DS.Model.extend({
	name: DS.attr('string'),
    assets: DS.hasMany('asset', { async: true })
});

//FIXTURE...