Ember.js v0.9.7

by hekevintran

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://epeli.github.com/underscore.string/lib/underscore.string.js"></script>
<script type="text/x-handlebars" >
    {{#view App.MyView}}
        {{view App.Select selectionBinding="controller.select"}}
        {{view Ember.TextField valueBinding="controller.query"}}
        <p>
            {{#each controller.filtered}}
                {{this}}
            {{/each}}
        </p>
    {{/view}}
</script>

JavaScript

App = Ember.Application.create({});
App.controller = Ember.Object.create({
    numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
    contentBinding: Ember.Binding.oneWay('numbers'),
    select: null,
    query: null,
    select_changed: function() {
        var s = this.get('select');
        if (!Ember.none(s)) {
            this.set('query', null);
        }
    }.observes('select'),

    query_changed: function() {
        var q = this.get('query');
        if (!Ember.empty(q)) {
            this.set('select', null);
        }
    }.observes('query'),

    filtered: function() {
        var filter = Ember.K;
        var s = this.getPath('select.value');
        var q = this.get('query');
        if (s === 'even') {
            filter = function(value) {
                return value % 2 === 0;
            }
        } else if (s === 'odd') {
            filter = function(value) {
                return value % 2 === 1;
            }
        } else if (!Ember.empty(q)) {
            filter = (function(query) {
                return function(value) {
                    return (value.toString()).indexOf(query) !== -1;
                };
            }(q));
        }

        return this.get('content').filter(filter, this);
    }.property('select', 'query')
});

App.Select = Ember.Select.extend({
    prompt: 'All numbers',
    content: [Ember.Object.create({label: 'Even numbers', value: 'even'}), Ember.Object.create({label: 'Odd numbers', value: 'odd'})],
    optionLabelPath: 'content.label',
    optionValuePath: 'content.value'
});

App.MyView = Ember.View.extend({
    controllerBinding: 'App.controller'
});