CODEWITHSUNDEEP
ember.js
Le Duy Khanh
Le Duy Khanh

Reputation: 1369

Ember js get object from previous route

I am building my first EmberJS app.

Initially from index route, I will display an A. When user click A, it will route to /a. Component A will have a field url, after fill in and click a button, it will route to /b. Component B also has a field email. Fill in and click a button it will route to /summary which displays what I filled in A and B. How could I do it in best practice?

I am using ember-cli and this.transitionTo(/b) to go to route /b

Upvotes: 3

Views: 638

Answers (2)

sheriffderek
sheriffderek

Reputation: 9043

Here is a tutorial that explains exactly how to make a multi-step form like you are asking for. http://romulomachado.github.io/2016/12/06/multi-step-form-with-ember.html

Using a nested route system, this is fairly straight forward.

Router.map(function() {
  this.route('checkout', function() {
    this.route('personal-info');
    this.route('shipping-info');
    this.route('payment-info');
    this.route('confirmation');
  });
});

and then you can use an 'order' or some 'form' model to keep the information alive.

I followed the example and built one out with the ability to edit and confirm at the end too. : )

Upvotes: 1

Ember Freak
Ember Freak

Reputation: 12872

It seems like nested routes would be good for this implementation.
/a - route

model(){
 return {url:'default'};
}

a.hbs

{{comp-a model=model}}

/a/b - route

model(){
 return {email:''};
}

a/b.hbs

{{comp-b model=model}}

/a/b/summary - route

model(){
 return {amodel:this.modelFor('a'),bmodel:this.modelFor('b')};
}

a/b/summary.hbs

{{comp-a model=model.amodel }}
{{comp-b model=model.bmodel }}

Upvotes: 2

Related Questions