ember中嵌套路由的控制器/路由约定

时间:2015-01-22 09:26:02

标签: javascript ember.js url-routing ember-cli

我的ember应用程序中有一个嵌套路径的资源:

router.js:

Router.map(function() {
  this.resource('posts', function () {
    this.route('show',  {path: '/:id'});
  });
});

我的控制器的ember常规是什么?我是为每个网址创建单独的文件,还是show处理程序进入/controllers/posts.js?或者是否有多种正确的方法可以做到这一点?

这是我目前在 /routes/posts.js中所拥有的:

import Ember from 'ember';

var PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

var posts = [
  {
    id: '1',
    title: 'Object nr one',
    content: 'This is the content of Object nr one.'
  },
  {
    id: '2',
    title: 'Obelix',
    content: 'A fat gaul. From a comic book.'
  },
  {
    id: '3',
    title: 'Werner',
    content: 'Wat soek werner hier? Dis mos nou belaglik man.'
  }
];

export default PostsRoute;

这是 /controllers/posts.js:

import Ember from "ember";

export default Ember.ArrayController.extend({});

如果有人在这个例子中向我展示了正确的做事方式,我将不胜感激。我真的很难在网上找到合适的例子。

请注意我使用的是ember CLI

1 个答案:

答案 0 :(得分:1)

"显示处理程序"永远不会去控制器文件,而是Route。您可以为每个resourceroute指令创建单独的路径,控制器和模板。您可以告诉控制器它应该具有与其他控制器相同的行为,或者使用mixin。例如:

router.coffee:

@resource 'training', ->
      @route 'chest'
      @route 'shoulders'

意味着您需要以下结构:

  

app / routes / training [您的父资源] /chest.js [您的孩子路线]   应用程序/路由/训练/ shoulders.js

如果您需要每条路线的控制器,您需要具有以下路径的文件:

  

应用程序/控制器/训练/ chest.js   应用程序/控制器/训练/ shoulders.js

模板:

  

应用程序/模板/训练/ chest.js   应用程序/模板/训练/ shoulders.js

这是因为我已将training定义为资源(​​父级),并将路由定义为其子级。

如果您使用Ember CLI,则可以使用以下命令:

  

ember g controller training / shoulder

或:

  

ember g route training / shoulder

上一个命令将生成:router.js中的路由,模板和条目。您可以使用此命令,因此您不必过多担心目录结构。 但是,重要的是重要要记住,当您在资源中定义资源时 - 子资源实际上并不是一个孩子,并且它不应该放在父资源目录中。例如:

@resource 'tracks', ->
  @resource 'track', path: '/track/:track_id', ->
    @route 'edit'

表示您需要2个目录来存储路径文件:

  
      
  1. 应用程序/路由/音轨/   
        
    • index.js
    •   
  2.   
  3. 应用程序/路由/跟踪/   
        
    • edit.js
    •   
  4.   

而不是 app / routes / tracks / track / edit 。 因此,在您的示例中,对于以下路由器:

Router.map(function() {
  this.resource('posts', function () {
    this.route('show',  {path: '/:id'});
  });
});

app / routes应如下所示:

app/routes:
 - posts.js # main route for whole resource
 - posts/ # directory which contains files for routes inside posts resource
   - show.js # posts/show route