2014-06-05 130 views
0

我有一個非常簡單的示例應用程序,我試圖創建一些動態嵌套路線。看起來鏈接輔助程序在URL中放入了「未定義」,而不是對象的ID。Ember鏈接到創建鏈接到undefined

這與「州」表中出現的(第一個列表,還沒有得到到第二尚未)

我的SO似乎沒有解決這個問題,我發現類似的問題。

這裏是JS:

App = Ember.Application.create(); 

App.Router.map(function() { 
    this.resource('states', function() { 
     this.resource('state', {path: '/:stateId'}, function() { 
      this.resource('manifests', function() { 
       this.resource('manifest', {path: '/:manifestId'}); 
      }) 
     }); 
    }); 
}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return ['red', 'yellow', 'blue']; 
    } 
}); 

App.StatesRoute = Ember.Route.extend({ 
    model: function() { 
     return [{ 
      id: 1, 
      stateName: 'Tennessee' 
     }, { 
      id: 2, 
      stateName: 'Michigan' 
     }, { 
      id: 3, 
      stateName: 'Texas' 
     }]; 
    } 
}); 

App.StateRoute = Ember.Route.extend({ 


    model: function (params) { 
     console.dir(params); 

     return [{ 
      manifestId: 1, 
      manifestName: 'Manifest 1' 
     }, { 
      manifestId: 2, 
      manifestName: 'Manifest 2' 
     }, { 
      manifestId: 3, 
      manifestName: 'Manifest 3' 
     }]; 
    } 
}); 

App.ManifestsRoute = Ember.Route.extend({ 
    model: function (params) { 
     console.dir(params); 
    } 
}); 

下面是HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Ember Starter Kit</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <script type="text/x-handlebars"> 
    <h2>Welcome to Ember.js</h2> 

    {{outlet}} 
    </script> 

    <script type="text/x-handlebars" id="states"> 
     <ul> 
      {{#each}} 
       <li>{{#link-to 'state' this}}{{this.stateName}}{{/link-to}} </li> 
      {{/each}} 
     </ul> 

     {{outlet}} 
    </script> 

    <script type="text/x-handlebars" id="state"> 
     <ul> 
      {{#each man in .}} 
       <li>{{#link-to 'manifest' man}}{{man.manifestName}}{{/link-to}}</li> 
      {{/each}} 
     </ul> 
    </script> 

    <script src="js/libs/jquery-1.10.2.js"></script> 
    <script src="js/libs/handlebars-1.1.2.js"></script> 
    <script src="js/libs/ember-1.5.1.js"></script> 
    <script src="js/app.js"></script> 
    <!-- to activate the test runner, add the "?test" query string parameter --> 
    <script src="tests/runner.js"></script> 
</body> 
</html> 

回答

4

我知道是一箇舊的帖子,但實際的燼版有相同的「問題」。 「問題」在路由器中,你應該用下劃線命名你的:id,這將解決url中的'undefined'。

例如::state_id和manifest_id

希望得到這個幫助。

+0

今天救了我;-) –

4

你需要傳遞灰燼模型或使用該ID。在使用普通對象時,ember不知道哪個是構建URL的主鍵。

{{#link-to 'state' id}}{{stateName}}{{/link-to}} 

然後,您可以讀取StateRoute中的參數params.stateId。

+0

我以爲它尋找一個名爲'id'的屬性,如果它是一個普通的對象。 ember.js指南使其聽起來像是可行的:http://emberjs.com/guides/templates/links/。導遊是否錯誤? – Scot