Simple starting point for Ember.js fiddles

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<script type="text/x-handlebars" data-template-name="edit" >
    name: {{view App.TextField valueBinding="content.name" propertyName="name" }}</br>
    age: {{view App.TextField valueBinding="content.age" propertyName="age" }}</br>
    <button {{action "save"}}>save</button>
</script>
<script type="text/x-handlebars">
    {{view App.InputView}}
</script>
<script type="text/x-handlebars" data-template-name="errorTemplate">
    {{#if isError}}{{errorMessage}}{{/if}}
</script>
<!-- how can i wrap errorMessage in a div? -->

CSS

.error {
    color: red;
    border-color: red;
}

JavaScript

App = Ember.Application.create();

App.Error = Ember.Object.extend({
    isError: function(propertyName) {
        return !Ember.empty(this.getErrorMessage(propertyName));
    },
    getErrorMessage: function(propertyName) {
        return this.get(propertyName);
    }
});

App.obj = Ember.Object.create({
    name: 'Chuck Norris',
    age: 31
});

App.ErrorMixin = Ember.Mixin.create({
    classNameBindings: ['isError:error'],
    errorBinding: 'parentView.error',

    templateName: 'errorTemplate',

    isError: function() {
        var error = this.get('error');
        console.log("isError: " + error);
        return error && error.isError(this.get('propertyName'));
    }.property('error', 'propertyName'),

    errorMessage: function() {
        var error = this.get('error');
        if (error) {
            var propertyName = this.get('propertyName');
            return error.getErrorMessage(propertyName);
        }
    }.property('error', 'propertyName')
});

App.TextField = Ember.TextField.extend(App.ErrorMixin);

App.InputView = Ember.View.extend({
    templateName: 'edit',
    contentBinding: 'App.obj',
    save: function() {
        var content = this.get('content');
        var error = this.get('error');
        if (error) {
            error.destroy();
        }
       
        error = App.Error.create();

        if (content.get('age') <= 100) {
            error.set('age', 'sorry, you are not wise enough');
        }

        if ('Chuck Norris' === content.get('name')) {
            error.set('name', 'yeah, and i am the queen of england');
        }

        this.set('error', error);
    }
})