Tag Archives: Javascript

Save & validation callbacks for ember-data/ember.js

You want to do something when your record got saved/validations failed.

Usage

user.observeSaveOnce(success: function(){
  // go to next page
}, error: function(){
  // show validation errors
})

Code

  # your model.js 
  observeSaveOnce: function(options) {
    function callback() {
      var outcome = 'success';
      if (this.get('isDirty')) {
        if (this.get('isValid')) return; // not submitted yet
        outcome = 'error';
      }

      (options[outcome] || Ember.K).call(this);

      this.removeObserver('isDirty', callback);
      this.removeObserver('isValid', callback);
    }

    this.addObserver('isDirty', callback);
    this.addObserver('isValid', callback);
  }

Logic inside of Handlebars templates for Ember.js is possible, just not pretty

We had a few occasions where we needed something like count > 0 or other simple logic, that should live inside the template, but its impossible… until now 🙂

Code

{{#ifEval "this.getPath('content.click_count') >= 0"}}
   The content has been clicked {{content.click_count}} times!
{{/ifEval}}

Usage

Handlebars.registerHelper('ifEval', function(code, options) {
  if(eval(code)){
    return options.fn(this);
  }
});

Testing geolocation with capybara + selenium + firefox

Just built this little snippet in a hacknight, it simulates a geolcation via capybara, so you can test if you geo-magic actually works 🙂

View

<p>Finding your location... <span id="status">checking...</span></p>
<script>
  jQuery(function () {
    var timeout = (document.location.href.indexOf('test_location') >= 0 ? 100 : 0);

    setTimeout(function(){
      navigator.geolocation.getCurrentPosition(function(){
        jQuery('#status').html("found you!");
      });
    }, timeout)
  });
</script>

Capybara test via selenium in rspec

  def simulate_location(lat, lng)
    page.driver.browser.execute_script <<-JS
      window.navigator.geolocation.getCurrentPosition = function(success){
        var position = {"coords" : { "latitude": "#{lat}", "longitude": "#{lng}" }};
        success(position);
      }
    JS
  end

  it "can use location", :js => true do
    visit '/?test_location=true'
    simulate_location 20, 20
    sleep 0.2
    page.should have_content "found you!"
  end

Jasmine result styles for non-jumping page

The default jasmine page always jumped around, since the #jasmine_content area is above the results.
This css makes the page more stable with a 2-column layout, progress top, results left, content right.

# jasmine.yml
stylesheets:
  - spec/javascripts/support/jasmine.css
  ...

# spec/javascripts/support/jasmine.css

#HTMLReporter .results{
  position:absolute;
  top: 250px;
  width: 50%;
}

#jasmine_content {
  position:absolute;
  top: 250px;
  right: 0;
  width: 50%;
}