2017-06-04 3 views
2

ich eine ember Demo erstellt, eine übergeordnete Ansicht und es ist Kind das ist die übergeordnete AnsichtEmber Modell nicht dynamisch binden mit Link zu

<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}} 

und seine js Anmeldung ist Import Ember von ‚Ember‘;

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

    } 
}); 

, aber wenn ich den Link zu bedienen und navigieren, die Daten nicht zeigen, es sei denn ich die Seite aktualisieren Dies ist das Kind Ansicht

<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}} 

und seine js Logik

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 mit ember 2.5 und das ist ein Teil des Routers

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

Antwort

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

Da Sie das Objekt todo bereitstellen, wird der Modell-Hook nicht ausgeführt. so versuchen

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

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

Hinweis: Eine Route mit einem dynamischen Segment wird immer sein Modell Haken genannt hat, wenn es über die URL eingegeben wird. Wenn die Route über eine Transition (z. B. bei Verwendung des Hyperlink-zu Lenker-Helpers) eingegeben wird und ein Modellkontext bereitgestellt wird (zweites Argument für link-to), wird der Hook nicht ausgeführt. Wenn stattdessen eine Kennung (z. B. eine ID oder ein Slug) bereitgestellt wird, wird der Modell-Hook ausgeführt.

+0

danke viel Arbeit ziemlich gut, ist die Sache in diesem vid senden das Objekt hat das Modell hook.Was ist das Diff? https://egghead.io/lessons/javascript-define-model-s-routes-in-ember – abdoutelb

+1

Dieses Tutorial ist wenig irreführend, eigentlich in diesem Tutorial 'todos.show' zeigt das' Todos' Modell nicht das '' todos.show' Modell. Da beide die gleichen Daten haben, konnten wir den Unterschied nicht identifizieren. Schauen Sie sich [this twiddle] an (https://ember-twiddle.com/43f8ffc356603943d46a26360451f0ac?openFiles=routes.todos.js%2C&route=% 2Ftodos% 2F1) die das Problem zeigen – kumkanillam

+0

Ich habe es, da das Modell in diesem Tutorial ist die gleiche Glut kann herausfinden, wie man einen Modell-Haken, wenn nicht, ich sollte explizit die ID senden. – abdoutelb

1

Ack, OP des Videos hier. Das tut mir leid. Kleine Missverständnisse meinerseits, ich sollte das in den Kommentaren des Videos ansprechen und versuchen, das zu überarbeiten. Entschuldigung für die Verwirrung! D:

+0

Kein Problem @kumkanillam erklären es gut BTW Ich liebte die Grundlagen: D – abdoutelb

+0

@Abdoutelbel Fühlen Sie sich frei, um mich per E-Mail mit mehr Feedback zu erreichen, können Sie einen Weg finden, um mich über iheanyi.com oder nur DM mich zu erreichen Twitter! twitter.com/kwuchu – iheanyi

Verwandte Themen