Ember.js wizard control

问题

I have an ember.js wizard control with a number of steps.

An ember model object has its various properties set at each stage of the wizard.

The only way I can see of changing the view is to use the linkTo helper like this:

{{#linkTo steps.two model}}Step 2{{/linkTo}}

But this is no good to me as I will need each step that I linkTo to to be a dynamic route:

@resource "steps", ->
  @route "one", {path: 'one/:model_id'}
  @route "one", {path: 'two/:model_id'}
  #etc.

The dynamic route is no good because the model will not be saved until the end of the wizard. If I try to use transitionTo to pass the model then the url obviously gets screwed up because it is calling tostring on the model.

I would prefer to use something like the render helper that keeps the context as it renders content but I don't think it is possible to replace an entire view this way.

Can anyone suggest a better approach?

回答1:

You don't have to use the model_id in your path. You just need to override the model property in the routes. A basic one would be:

@resource "steps", ->
  @route "one", {path: 'one'}
  @route "two", {path: 'two'}


Redbot.StepsRoute = Ember.Route.extend({
  model: function() {
    return App.User.createRecord({});
  }
});

Redbot.StepsOneRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('steps');
  }
});

Redbot.StepsTwoRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('steps');
  }
});

Each child route just uses the model defined in the parent route.

What ember does by default is just set the model using the model_id parameter, so overriding model gives you control over that functionality.

来源：https://stackoverflow.com/questions/14701856/ember-js-wizard-control

标签

ember.js