Search code examples
javascriptember.jsember-cliember.js-2

Ember model Not Bind Dynamically using Link-to


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"});
  });

Solution

  • {{#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.