All posts by George Brocklehurst

Auto-squashing Git Commits

Rebase like a pro with autosquash.

Read more at the source

HTTP Safety Doesn’t Happen by Accident

What are safe and unsafe HTTP methods, and why does it matter?

Read more at the source

Announcing Goal-Oriented Git

Our latest book is all about using Git effectively.

Read more at the source

The magic behind configure, make, make install

Understanding how `./configure && make && make install` works and where it comes from.

Read more at the source

Announcing gitsh

gitsh is a new way to use Git: instead of running Git commands in a general
purpose shell like zsh or bash, gitsh provides you with a dedicated shell just
for your Git commands.

Many of the early Unix utilities, like dc, didn’t take sub-commands lik…

Read more at the source

With Save button

Oftentimes, live updating is not what you want. Instead, you want to update the model data only when the user clicks a Save button.

Plain input field

App.LazyTextField = Ember.View.extend({
  attributeBindings: ['value', 'type', 'size', 'name', 'placeholder', 'disabled', 'maxlength'],
  tagName: 'input',
  type: 'text',
  getCurrentValue: function() {
    return this.$().val();
  }
});

This is a lazy-updating text field. Whenever you set or update its value property, the contents get updated, but when the user changes the contents, they are not written back into value.

Now we can implement a save button like so:

App.PersonView = Ember.View.extend({
  firstName: 'Jane',
  template: Ember.Handlebars.compile(
    '<form>' +
    '{{view App.LazyTextField valueBinding="view.firstName" viewName="textField"}}' +
    '<input type="submit" value="Save" {{action save}}>' +
    '</form>'),
  save: function(e) {
    e.preventDefault(); e.stopPropagation();
    this.set('firstName', this.get('textField').getCurrentValue());
  }
});

Another pattern: One-way bindings

There is another way to achieve this, using the built-in live-updating Ember.TextField and a one-way binding. It’s more compact, though slightly more opaque:

1
2
3

App.LazyTextField = Ember.TextField.extend({
  valueBinding: Ember.Binding.oneWay('source')
});

Now instantiate LazyTextField, and bind your model data to source instead of value, and property changes will propagate only from source to value, but not vice versa (unless explicitly copied by the save function).

App.PersonView = Ember.View.extend({
  firstName: 'Jane',
  template: Ember.Handlebars.compile(
    '<form>' +
    '{{view App.LazyTextField sourceBinding="view.firstName" viewName="textField"}}' +
    '<input type="submit" value="Save" {{action save}}>' +
    '</form>'),
  save: function(e) {
    e.preventDefault(); e.stopPropagation();
    this.set('firstName', this.getPath('textField.value'));
  }
});

[…]

The Ruby Rails Aggregator