Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert customer details page to backbone #1762

Merged
merged 7 commits into from
Mar 14, 2017

Conversation

jhawthorn
Copy link
Contributor

This PR aims to replace the jQuery soup of checkouts/edit.js and address_states.js with backbone models and views.

There were a number of issues with the existing code:

  • A number of race conditions were possible (though somewhat unlikely because the states API is very fast). For example switching countries rapidly could result in the wrong states being shown
  • "Guest checkout" toggle didn't work correctly. If it was switched from "no" to "yes" and then back, it would still be submitted to the server as a guest checkout (no associated user)
  • checkouts.js was callback hell. Worst case was setting the state_id, which had to be done inside a select2 callback, and a callback from an ajax request inside of update_state

The conversion to backbone added a fair number of lines, which I feel I should justify. From about 135 lines between edit.js and address_states.js to about 250 lines between the four new backbone views.

This PR adds two way bindings between all the form inputs on this page. This allows our top level view to be oblivious to the details of the subview (in particular the awkwardness of state selection). Specifically I'd like to point to the existing code when selecting a customer vs the new code

This encapsulates the details of using select2
This code did nothing because there are no fields named like
`#order_bill_address_attributesfirstname`, they're named
`#order_bill_address_attributes_firstname`.

This bug was introduced in Spree 1.2, and I've heard no complaints about
this behaviour, so we should leave it as-is.
@jasonfb
Copy link

jasonfb commented Mar 9, 2017

👍 for backbone; we use it widely (we use Mariontte/Backbone) and love it. in particular, it boots extremely fast and its source code is accessible (readable).

Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One little question about how we populate the state select. But as always a great improvement 🎯 👍

var $state_select = this.$state_select;
this.states.each(function(state) {
$state_select.append(
$('<option>').prop('value', state.id).text(state.get("name"))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need a check for already existing states here? Or is the select always empty at this point?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, we empty the <select> on line 42.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jhawthorn jhawthorn merged commit 46e2843 into solidusio:master Mar 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants