JSFiddle - React, Tailwind, and code Playground

by remunda

HTML

<script type="text/x-handlebars" data-template-name="glossaries">
    < div > {{
            view Ember.Select
            contentBinding = "allLanguages"
            optionLabelPath = "content.name"
            optionValuePath = "content.id"
            selectionBinding = "model.language"
            placeholder = "Select Languages"
            multiple = false
        }} < /div>
</script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/jquery.min.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>

JavaScript

var langs = {
    languages: [{
        id: 1,
        name: "en"
    }, {
        id: 2,
        name: "de"
    }, {
        id: 3,
        name: "fr"
    }, {
        id: 4,
        name: "es"
    }]
};

var glossaryData = {
    glossary: {
        id: 10,
        name: "en",
        language: 1
    }
};

var langData = {
    language: langs.languages[0]
};

var App = window.App = Ember.Application.create();

App.ApplicationSerializer = DS.RESTSerializer.extend({
    keyForRelationship: function (key, relationship) {
        console.log("keyForRelationship", arguments);
        return key + 'Id';
    }
});

App.ApplicationAdapter = DS.RESTAdapter.extend({
    defaultSerializer :"REST",
    findAll: function (store, type, id) {
        return new Ember.RSVP.Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('adapter lang', langs);
                Ember.run(null, resolve, langs);
            }, 500);
        });
    },
    find: function (store, type, id) {
        console.log("find", type, id);
        return new Ember.RSVP.Promise(function (resolve, reject) {
            setTimeout(function () {
                var data = type == "App.Glossary" ? glossaryData : langData;
                console.log('adapter glossary', data);
                Ember.run(null, resolve, data);
            }, 500);
        });
    }


});

App.Language = DS.Model.extend({
    name: DS.attr()
});

App.Glossary = DS.Model.extend({
    name: DS.attr(),
    language: DS.belongsTo('language', {
        async: true
    })
});

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

App.GlossariesRoute = Ember.Route.extend({
    model: function () {
        var self = this;
        return new Ember.RSVP.Promise(function (resolve, reject) {
            self.store.find("glossary", 1).then(function (glossary) {
                self.store.find('language').then(function (languages) {
                   ...