JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<p style="margin-bottom: 1em;">This triggers a deprecation notice in master (as of 2012-06-20):</p>
<p style="margin-bottom: 1em;">How to replicate:</p>
<ol style="margin-bottom: 1em;">
    <li>Click the "Edit..." link below</li>
    <li>Edit the form (notice how the Save button becomes enabled)</li>
    <li>Click the Save button (notice the deprecation notice in dev tools)</li>
</ol>

<div style="padding: 1em; background-color: #FFFFAA;" id="form-container"></div>
<script type="text/x-handlebars" data-template-name="forms">
            {{#with view}}
            {{#if allowEdit}}
                <p>{{view Ember.TextField valueBinding="firstName"}}</p>
                <p><button {{action saveResource target="view"}} {{bindAttr disabled="disallowSave"}}>Save</button></p>
            {{else}}
                <p>First Name: {{firstName}}</p>
                <p><button {{action editResource target="view"}}>Edit...</button></p>
            {{/if}}
            {{/with}}
</script>

JavaScript

App = Ember.Application.create();

    var formView = Ember.View.create({
        templateName: 'forms',
        allowEdit: false,
        allowSave: false,
        firstName: "",

        firstNameDidChange: function() {
            if (this.get('allowEdit')) {
                this.set('allowSave', true);
            }
        }.observes('firstName'),

        editResource: function() {
            this.set('allowEdit', true);
        },

        saveResource: function() {
            this.set('allowEdit', false);
            this.set('allowSave', false);
        },

        disallowSave: function() {
            return !this.get('allowSave');
        }.property('allowSave')
    });

    formView.appendTo("#form-container");