JSFiddle - React, Tailwind, and code Playground

by kitsunde

HTML

<script src="http:////cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/release/ember.prod.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
</script>
<script type="text/x-handlebars" id="profile/edit">
    Edit.
    <form {{action 'save' on="submit"}}>
        <div>
            {{input value=email}}
        </div>
        <button>Save</button>
    </form>
    {{#link-to 'profile'}}Back{{/link-to}}
</script>
<script type="text/x-handlebars" id="profile/index">
    {{#link-to 'profile.edit'}}Edit{{/link-to}}
    {{email}}
</script>

JavaScript

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

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

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

App.SingleObjectMixin = Ember.Mixin.create({
    modelName: undefined,
    model: function(){
        console.log(this);
        return this.store.find(this.get('modelName')).then(function(models){
            return models.get('firstObject');
        });
    }
});

App.ProfileIndexRoute = Ember.Route.extend(App.SingleObjectMixin, {
    modelName : 'user'
});

App.ProfileEditRoute = App.ProfileRoute.extend({
    deactivate: function(){
        var model = this.modelFor('profile');
        if(model.get('isDirty') && !model.get('isSaving')){
          model.rollback();
        }
    },
    actions: {
        save: function(){
            this.modelFor('profile').save();
            this.transitionTo('profile');
        }
    }
});

App.User = DS.Model.extend({
    email: DS.attr('string')
});

App.User.FIXTURES = [
    {
        id: 1,
        email: '[email protected]'
    }
];