JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <p>The post with the hidden attribute set to false doesn't bind to the option with the false value.</p>
  {{#each post in controllers.postsController.posts}}
    <p>
    {{post.title}}
    {{view Ember.Select contentBinding="controllers.postsController.visibilityOptions" optionLabelPath="content.name" optionValuePath="content.val" prompt=" " valueBinding="post.hiddenString"}}
    {{post.hidden}}
    </p>
  {{/each}}
</script>

CSS

p {
    margin-bottom:10px;
}

JavaScript

MyApp = Ember.Application.create({
  autoinit: false
});

MyApp.router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/'
    })
  })
});

MyApp.ApplicationController = Ember.Controller.extend();

MyApp.Post = Ember.Object.extend({
    hidden: null,
    title: null,
    hiddenString: function() {
      return this.get('hidden') ? 'true' : 'false';
    }.property('hidden')
});

MyApp.PostsController = Ember.ArrayController.extend({
    posts: [
        MyApp.Post.create({hidden:false, title: "Visible Post"}),
        MyApp.Post.create({hidden:true, title: "Hidden Post"})
    ],
    visibilityOptions: (function() {
        arr = Ember.ArrayProxy.create({
            content: [
                {name: "Hidden", val: 'false'},
                {name: "Visible", val: 'true'}
             ]
        });
        return arr;
    }).property()
});


MyApp.initialize(MyApp.router);