ember.js - Ember 应用程序套件和资源路线

Question

我正在尝试在 ember 应用程序套件中定义嵌套资源。我的文件结构不正确吗？当我添加嵌套资源时，出现以下异常:

Error: Assertion Failed: The URL '/pages.index' did not match any routes in your application

只需注释掉定义嵌套“页面”资源的函数，应用程序即可正确加载并显示页面模板。

路由器代码:

var Router = Ember.Router.extend(); 

Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
  this.resource('pages', {path: '/pages'}
      // if this line is commented out, no error (index route is not called though)
      , function() { this.resource('page', {path: ':page_id'}); }
    );
});

export default Router;

文件结构如下:

$ ls -R
component-test.js   helper-test.js      pages
component_test.js   index.js        pages.js

./pages:
index.js    page.js

页面路由:

export default Ember.Route.extend({

  model: function() {
    return [{title: "One", _id: "one"}, {title: "Two", _id: "two"}];
    //this.store.find('page');
  }

});

页面/索引路线:

export default Ember.Route.extend({
  model: function() {
    return this.modelFor('page');
  }
});

es6 为页面/索引路由生成的模块如下所示:

define("appkit/routes/pages/index", 
  ["exports"],
  function(__exports__) {
    "use strict";
    __exports__["default"] = Ember.Route.extend({
      model: function() {
        return this.modelFor('page');
      }
    });
  });

Answer 1

试试这个。

您的页面文件夹中是否有名为“index.js”的页面索引路由？

Ember App Kit 按文件夹结构查找文件。因此页面索引路由应该在“app/routes/pages/index.js”中找到。

这是一个包含此代码的存储库 https://github.com/kiwiupover/for_eric

路由器

var Router = Ember.Router.extend(); 

Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
  this.resource('pages', function() {
    this.route('new');
  });
});

export default Router;

路线文件夹

routes -|        //folder
   pages.js     
   pages -|      // folder
     index.js

页面路由

export default Ember.Route.extend({
  model: function(){
    return [{title: "One", _id: "one"}, {title: "Two", _id: "two"}];
  }
});

页面索引路由

export default Ember.Route.extend({
  model: function(){
    return this.modelFor('pages');
  }
});

模板文件夹

templates -|     //folder
   pages.hbs     
   pages -|      // folder
     index.hbs

页面模板

<h1>Pages</h1>
<ul>
  {{#each}}
    <li>{{title}}</li>
  {{/each}}
</ul>

{{outlet}}

索引模板

<h2>The Index page for Pages</h2>

<ul>
  {{#each}}
    <li>the index page {{title}}</li>
  {{/each}}
</ul>