Ember model Not Bind Dynamically using Link-to

Question

I created an ember demo,A parent view and it's child this is the parent view

<h1>A list of Todo Tasks</h1>
<ul>
{{#each model as |todo|}}
<li>{{#link-to "todos.details" todo}}{{todo.desc}}{{/link-to}}</li>
{{/each}}
</ul>

{{outlet}}

and Its js login is import Ember from 'ember';

export default Ember.Route.extend({
    model (){
        return [{
            "id" : 1,
            "desc" : "Try use ember"
        },
        {
            "id" : 2,
            "desc" : "Add it to github"
        },
        ];

    }
});

but when i use the link-to and navigate the data didn't show unless i refresh the page This is the child view

<h2>The Details for <span style="color: green;">{{model.name}}</span> is : </h2>
{{#if model.error}}
<p>{{model.message}}</p>
{{else}}
<ul>
 {{#each model.steps as |task|}}
    <li>{{task.do}}</li>
    {{/each}}
</ul>
{{/if}}

{{outlet}}

and its js logic

import Ember from 'ember';

export default Ember.Route.extend({
    model(params){

        if(params.id == "1"){
            return {
                name : "Ember SetUp",
                steps : [{
                    id :1,
                    do : "Download Ember Cli"
            },
            {
                    id :2,
                    do : "Generate New Project"
            },
            {
                    id :3,
                    do : "Generate Pages&Routes"
            }
                ]
            };
        }
        else{
            return {
                error : true,
                name : "Not Found",
                message : "There is no task with this id"
            }
        }
    }
});

iam using ember 2.5 and this is part of the router

this.route('todos', function() {
    this.route('details',{path : "/:id"});
  });

Ember Freak · Accepted Answer · 2017-06-05T04:54:37.827

2

{{#link-to "todos.details" todo}}

Since you are providing the object todo, so it will not execute the model hook. so try

{{#link-to "todos.details" todo.id}}

Refer here: https://guides.emberjs.com/v2.13.0/routing/specifying-a-routes-model/#toc_dynamic-models

Note: A route with a dynamic segment will always have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), and a model context is provided (second argument to link-to), then the hook is not executed. If an identifier (such as an id or slug) is provided instead then the model hook will be executed.

edited Jun 05 '17 at 04:54

answered Jun 05 '17 at 04:45

Ember Freak

12,918
4
24
54

thanks a lot Working pretty well, the thing is in this vid sending the object did execute the model hook.What is the diff ? https://egghead.io/lessons/javascript-define-models-for-routes-in-ember – abdoutelb Jun 05 '17 at 22:24
1

That tutorial is little misleading, actually in that tutorial `todos.show` is showing the `todos` model not the `todos.show` model. since both are having the same data so we were not able to identify the difference.. Have a look at [this twiddle](https://ember-twiddle.com/43f8ffc356603943d46a26360451f0ac?openFiles=routes.todos.js%2C&route=%2Ftodos%2F1) which demonstrate the issue – Ember Freak Jun 06 '17 at 04:09
I got it, since the model in this tutorial is the same ember can figure out how to make a model hook , if not i should explicitly send the Id. – abdoutelb Jun 06 '17 at 10:18

score 1 · Answer 2 · answered Jun 06 '17 at 13:01

1

Ack, OP of video here. Sorry about that. Small misspeaking on my part, I should address this in the comments of the video and try to revise that. Sorry for the confusion! D:

answered Jun 06 '17 at 13:01

iheanyi

424
4
9

No problem @kumkanillam declare it well BTW I loved the fundamentals :D – abdoutelb Jun 06 '17 at 15:08
@Abdoutelb Feel free to reach out to me via email with any more feedback, you can find a way to reach me through iheanyi.com or just DM me on Twitter! twitter.com/kwuchu – iheanyi Jun 06 '17 at 19:00

Ember model Not Bind Dynamically using Link-to

2 Answers2