CODEWITHSUNDEEP
ember.jsroutesember-data
Jetchy
Jetchy

Reputation: 242

Ember {{#link-to}} doesn't transition to route

This is my current situation. I have a campaign view route which is nested within a campaigns route. I'm using dynamic segments so the view page only displays the necessary details for that particular campaign.

This is illustrated in my routes:

TM.Router.map(function(){
    this.resource("campaigns", function(){
        this.route("view", { path: "/view/:id" }),
        this.route("create"),
        this.route("edit", { path: "/edit/:id" })
    })
});

The URL for the view page is:

/campaigns/view/2

The campaigns route has an edit link (which only appears in the view page) that should take the user to the edit page with form which is pre-populated with the details from the current item.

So I have linked the model to the edit page as such:

TM.CampaignsEditRoute = Ember.Route.extend({
    model: function(params){
        return this.store.find("campaign", params.id);
    }
});

and the edit link within the campaigns route is:

  <li>{{#link-to "campaigns.edit"}}Edit Campaign Code Info{{/link-to}}</li>

The link changes from:

/campaigns/view/2

to

/campaigns/edit/2

..but for some reason, the edit template doesn't appear/load on the page, neither is a GET request made to the model and I'm not sure why.

If I refresh the page, the form appears but nothing happens on the initial click.

Update

When I hard code the ID into the {{#link-to}}, 

  <li>{{#link-to "campaigns.edit" "2"}}Edit Campaign Code Info{{/link-to}}</li>

the link works how it should but I when I use campaign.id, I get

This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.

Update 2

So the problem is that the link which edits the campaign is in the top level route (campaigns) while the data I want to edit is in campaigns view. The link within campaigns doesn't know what the ID of the data in campaigns view is.

Upvotes: 2

Views: 3308

Answers (3)

Kalman
Kalman

Reputation: 8121

Now that I have more info about your issue - I decided to post another answer. The issue is that you have a color model which keeps on changing that you need to keep track of at the parent level.

Based on the Ember.js' documentation here, I came up with the following solution:

App.ColorManagerController = Ember.Controller.extend({
  currentColour: null
});

App.IndexController = Ember.ArrayController.extend({
  needs: ['colorManager'],
  currentColour:Ember.computed.alias('controllers.colorManager.currentColour'),

  editMode: false,

  actions: {
    goToDetails: function(colour){
      this.set("editMode",true);
      return this.transitionToRoute("index.view", colour);
  }
 }
});

App.IndexViewController = Ember.ObjectController.extend({
  needs: ['colorManager'],

  currentColour:Ember.computed.alias('controllers.colorManager.currentColour'),

  modelChanged: function(){
    this.set('currentColour', this.get('model'));
  }.observes('model')

});

Basically, the currentColour property (although spelled incorrectly ;)) gets synched up across the parent and child controllers.

Then, in your index (parent) template, you just need to say

  {{#if editMode}}
    {{#link-to "index.edit" currentColour}}Edit Colour{{/link-to}}
  {{/if}}

Working solution on jsbin here

Upvotes: 2

benzo
benzo

Reputation: 160

I think you should make a change to your nested route/resource structure. Take a look at this Ember page under the Nested Routes section for an example: http://emberjs.com/guides/routing/defining-your-routes/

I would make my router something like:

TM.Router.map(function(){
    this.resource("campaigns", function(){
        this.route("create");
        this.resource("campaign", { path: "/:id", function(){
            this.route("view");
            this.route("edit");
        });
    })
});

your link-to helper should now implicitly be working with the id param in the url so the link-to should work without having to pass values to it:

<li>{{#link-to "campaigns.edit"}}Edit Campaign Code Info{{/link-to}}</li>

Upvotes: 0

Kalman
Kalman

Reputation: 8121

I think it should be:

<li>{{#link-to "campaigns.edit" campaign}}Edit Campaign Code Info{{/link-to}}</li>

The following link explains this really well - http://emberjs.com/guides/templates/links/

Upvotes: 1

Related Questions