CODEWITHSUNDEEP
javascriptember.js
Jason
Jason

Reputation: 519

Manually connecting and disconnecting bindings

I'm creating a form with fields for billing and shipping addresses. When the user checks "same address", I want to create a binding between the billing address and shipping address; when the box is unchecked, I want to disconnect that binding.

HTML:

{{#with billingAddress}}
  {{view Ember.TextField valueBinding="firstName"}}
  {{view Ember.TextField valueBinding="lastName"}}
{{/with}}

{{view Ember.Checkbox checkedBinding="view.isSameAddress"}}

{{#with shippingAddress}}
  {{view Ember.TextField valueBinding="firstName"}}
  {{view Ember.TextField valueBinding="lastName"}}
{{/with}}

JavaScript:

App.AddressesRoute = Ember.Route.extend({
  model: function() {
    return {
      billingAddress: Checkout.BillingAddress,
      shippingAddress: Checkout.ShippingAddress
    };
  }
});

App.AddressesView = Ember.View.extend({
  isSameAddress: false,
  useSameAddress: function() {
    if (this.isSameAddress) {
      // bind billing and shipping addresses
    } else {
      // remove binding
    }
  }.observes('isSameAddress')
});

App.Address = Ember.Object.extend({
  firstName: null,
  lastName: null
});

App.Billing = App.Address.create({
  firstName: 'John',
  lastName: 'Doe'
});

App.Shipping = App.Address.create({
  firstName: '',
  lastName: ''
});

I've tried using Ember.Binding, as well as a number of other methods with no luck. I've been able to set the shipping as the billing, but there is no binding and the template does not update.

Any help or a nudge in the right direction would be appreciated!

Upvotes: 2

Views: 224

Answers (1)

dfsq
dfsq

Reputation: 193271

I'm not Ember expert but seems like you need to use Ember.Binding. Maybe something like this:

Ember.oneWay(App.Shipping, "firstName", "App.Billing.firstName");

to set up one way binding between App.Shipping.firstName and App.Billing.firstName fields.

http://jsfiddle.net/mSxeP/1/

Upvotes: 5

Related Questions