Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  
{{view Ember.Select selectionBinding="selectedValue" contentBinding=this optionLabelPath="content.firstName" optionValuePath="content.lastName"}}
    <p>Debounced: {{debounceSelected}}</p>
    <p>Throttled: {{throttleSelected}}</p>
  
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  }
});


Ember.debouncedObserver = function(func, key, time) {
    return Em.observer(function() {
        Em.run.debounce(this, func, time);
    }, key)
};

Ember.throttledObserver = function(func, key, time) {
    return Em.observer(function() {
        Em.run.throttle(this, func, time);
    }, key)
};


App.IndexController = Em.ArrayController.extend({
    selectObserver: Ember.debouncedObserver(function() {
        this.set('debounceSelected', this.get('selectedValue.firstName'));
    }, 'selectedValue', 1000),
    
    selectObserver2: Ember.throttledObserver(function() {
        this.set('throttleSelected', this.get('selectedValue.firstName'));
    }, 'selectedValue', 1000)

});