gistfile1.txt

<%= slider_view :slider, :minimum => 1, :maximum => 4, :step => 1, :bind => {:value => 'HelloWorld.appController.sliderValue' } %>
 
 
from
 
 <% content_for('body') do %>
<div class="sc-welcome">
  <img class="logo" src="<%= static_url('images/sproutcore-logo') %>" />
  <div class="message">
<%= checkbox_view :clock_checkbox, :label => "Show Clock", :bind => { :value => 'HelloWorld.appController.isClockShowing' } %>
<%= label_view :my_label, :tag => 'h1', :bind => { :value => 'HelloWorld.appController.greeting' } %>
  </div>
<%= slider_view :slider, :minimum => 1, :maximum => 4, :step => 1, :bind => {:value => 'HelloWorld.appController.sliderValue' } %>
</div>
 
// ==========================================================================
// HelloWorld.AppController
// ==========================================================================
 
require('core');
 
/** @class
 
  (Document Your View Here)
 
  @extends SC.Object
  @author    AuthorName
  @version 0.1
  @static
*/
HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController */ {
 
  greeting: function () {
    return 'Slider value is ' + this.get('sliderValue');
  }.observes('sliderValue'),
 
  toggleGreeting: function() {
    var currentGreeting = this.get('greeting');
    var newGreeting = (currentGreeting === 'Hello World!') ? 'I am on SproutCore!' : 'Hello World!' ;
    this.set('greeting', newGreeting);
  },
 
  isClockShowing: NO,
 
  isClockShowingObserver: function() {
    var isClockShowing = this.get('isClockShowing') ;
 
    if (!this._timer) this._timer = SC.Timer.schedule({
      target: this, action: 'tick', repeats: YES, interval: 1000
    });
    this._timer.set('isPaused', !isClockShowing) ;
 
    var newGreeting = (isClockShowing) ? this.now() : 'Hello World';
    this.set('greeting', newGreeting) ;
  }.observes('isClockShowing'),
 
  tick: function() {
    this.set('greeting', this.now()) ;
  },
 
  now: function() {
    return new Date().format('hh:mm:ss');
  },
        sliderValue: 1
 
 
}) ;
~      
 
<% end %>