You are currently browsing the tag archive for the ‘JS’ tag.
We have a lot of chosen in our ember app, and extracted this superclass to make interaction with them easier, it takes care of refreshing/filling/selecting stuff.
// fix chosen picks up ember script tags -> weird output when search for t or i
// this breaks the bindings within the options tags
// works around https://github.com/harvesthq/chosen/issues/581
App.UnboundSelectOption = Ember.SelectOption.extend({
template: Ember.Handlebars.compile('{{unbound label}}')
});
App.ChosenSelect = Ember.Select.extend({
chosenOptions: {},
template: Ember.Handlebars.compile(
'{{#if prompt}}{{unbound prompt}}{{/if}}' +
'{{#each content}}{{view App.UnboundSelectOption contentBinding="this"}}{{/each}}'
),
didInsertElement: function(){
this._super();
this.$().chosen(this.chosenOptions());
},
_closeChosen: function(){
// trigger escape to close chosen
this.$().next('.chzn-container-active').find('input').trigger({type:'keyup', which:27});
},
rerender: function(){
if(this.get('state') == 'inDOM'){
// remove now disconnected html
this.$().next('.chzn-container').remove();
}
this._super();
},
rerenderChosen: function() {
this.$().trigger('liszt:updated');
}
});
We had a lot of pain sorting our collections, since they are not there when the page is opened you need to continually re-sort…
App.Controller.Events = Ember.ArrayController.extend({
init: function() {
this._super();
Helper.assignSortedCollection(this, 'content', Oceans.store.findAll(Oceans.Model.Event), function(item){
return -1 * item.get('created_at').getTime();
});
}
});
Helper = {
assignSortedCollection: function(to, path, items, sorter){
items.addObserver('length', function(){
var temp = Ember.A();
this.forEach(function(item) { temp.pushObject(item); });
to.set(path, _(temp).sortBy(sorter));
});
}
}
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);
}
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);
}
});
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
