Ember.js 从Ember应用程序调用嵌套的Rails路由

如果我不需要嵌套模板，如何从Ember应用程序调用嵌套的Rails路由？ 我在Rails路由器中有以下路径：

# routes.rb
resources :shops do
  resources :shop_languages
end

因此，要获得商店语言列表，应点击

shops/：shop\u id/shop\u languages

以下是ShopsLanguagesController：

# controllers/shop_languages_controller.rb
class ShopLanguagesController < ApplicationController
  before_action :find_shop

  def index
    json_response @shop.shop_languages, :ok, include: 'language'
  end

  private

    def find_shop
      @shop = Shop.find(params[:shop_id])
    end
end

在Ember

application.hbs

模板中，语言链接定义如下

# application.hbs
{{#link-to 'languages' currentUser.user.shop.id class="nav-link"}}
..
{{/link-to}}

在Ember

languages.js

route handler中，我正在尝试加载商店语言：

# routes/languages.js
model(params) {
  return this.store.query('shop-language', { shop_id: params.shop_id })
}

余烬点击

/shop languages

端点，而不是嵌套的

shops/：shop\u id/shop\u languages

当然，我已经在Ember端定义了相应的模型：

# models/shop-language.js
import DS from 'ember-data';

export default DS.Model.extend({
  shop: DS.belongsTo('shop'),
  language: DS.belongsTo('language'),
  modified_by:  DS.attr('string')
});

---

这有什么问题，如何让它工作？谢谢你

简短的回答；向服务器发出的请求与您的路由结构不匹配，但基于您的模型和您正在使用的适配器，例如REST与JSON API，因为在服务器上调用的URL可能不同

因此，要将

/shop/:id/

添加为

商店语言

查询的前缀，您必须覆盖适配器的默认行为

要开始，请为您的模型生成适配器

ember g适配器商店语言

在新的适配器中，您可能需要重写2个函数

1）

查询

（）

2）

urlForQuery

（）

另请看

buildURL

（），它处理所有不同的场景

在1）中，您可能希望从查询参数中删除

shop\u id

，这样您就不会得到类似

/shops/1/shop languages？shop\u id=1

---

在2）您必须根据传递的查询参数将

/shops/1

添加到您的URL中

简短答案；向服务器发出的请求与您的路由结构不匹配，但基于您的模型和您正在使用的适配器，例如REST与JSON API，因为在服务器上调用的URL可能不同

因此，要将

/shop/:id/

添加为

商店语言

查询的前缀，您必须覆盖适配器的默认行为

要开始，请为您的模型生成适配器

ember g适配器商店语言

在新的适配器中，您可能需要重写2个函数

1）

查询

（）

2）

urlForQuery

（）

另请看

buildURL

（），它处理所有不同的场景

在1）中，您可能希望从查询参数中删除

shop\u id

，这样您就不会得到类似

/shops/1/shop languages？shop\u id=1

---

在2）中，您必须根据传递的查询参数将

/shops/1

添加到您的URL中

多亏了@dguettler，我找到了一个解决方案来让它工作

在余烬侧

按如下方式声明语言路由：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

修改/创建

languages.js

路由处理程序，如下所示：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

创建/修改

shop language.js

适配器，如下所示：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

添加链接以将车间语言加载到模板：

#templates/application.hbs

...
{{#link-to 'languages' currentUser.user.shop.id class="nav-link"}}
...
{{/link-to}}

#templates/languages.hbs

<ul class="list-group list-group-flush">
  {{#each model as |lang|}}
    <li class="list-group-item">{{lang.tag}}</li>
  {{/each}}
</ul>

以

语言显示店铺语言。hbs

模板：

#templates/application.hbs

...
{{#link-to 'languages' currentUser.user.shop.id class="nav-link"}}
...
{{/link-to}}

#templates/languages.hbs

<ul class="list-group list-group-flush">
  {{#each model as |lang|}}
    <li class="list-group-item">{{lang.tag}}</li>
  {{/each}}
</ul>

在

ShopLanguagesController

中加载车间语言：

#controllers/shop_languages_controller.rb

class ShopLanguagesController < ApplicationController
  before_action :find_shop

  def index
    json_response @shop.languages, :ok
  end

  private

  def find_shop
    @shop = Shop.find(params[:shop_id])
  end
end

---

多亏了@dguettler，我找到了一个解决方案来让它工作

在余烬侧

按如下方式声明语言路由：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

修改/创建

languages.js

路由处理程序，如下所示：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

创建/修改

shop language.js

适配器，如下所示：

# router.js
Router.map(function() {
...
  this.route('languages', { path: '/shops/:shop_id/shop_languages'});
});

#router.js
Router.map(function() {
  this.route('languages', { path: 'shops/:shopId/languages'});
  ..
});

#routes/languages.js

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.query('shop-language', { shopId: params.shopId});
  }
});

#adapters/shop-language.js

export default ApplicationAdapter.extend({
  urlForQuery (query) {
    return this._buildShopUrl(query.shop_id)
  },

urlForCreateRecord(modelName, snapshot) {
  return this._buildShopUrl(snapshot.belongsTo('shop').id);
},

urlForDeleteRecord(id, modelName, snapshot) {
  return this._buildShopUrl(snapshot.id, id);
},

_buildShopUrl(shop_id, id) {
  if (id) {
    return `shops/${shop_id}/languages/${id}`;
  }
  return `shops/${shop_id}/languages`;
 }
});

添加链接以将车间语言加载到模板：

#templates/application.hbs

...
{{#link-to 'languages' currentUser.user.shop.id class="nav-link"}}
...
{{/link-to}}

#templates/languages.hbs

<ul class="list-group list-group-flush">
  {{#each model as |lang|}}
    <li class="list-group-item">{{lang.tag}}</li>
  {{/each}}
</ul>

以

语言显示店铺语言。hbs

模板：

#templates/application.hbs

...
{{#link-to 'languages' currentUser.user.shop.id class="nav-link"}}
...
{{/link-to}}

#templates/languages.hbs

<ul class="list-group list-group-flush">
  {{#each model as |lang|}}
    <li class="list-group-item">{{lang.tag}}</li>
  {{/each}}
</ul>

在

ShopLanguagesController

中加载车间语言：

#controllers/shop_languages_controller.rb

class ShopLanguagesController < ApplicationController
  before_action :find_shop

  def index
    json_response @shop.languages, :ok
  end

  private

  def find_shop
    @shop = Shop.find(params[:shop_id])
  end
end

---

我正在使用

JSONAPIAdapter

（在

adapters/application.js

中定义，除了定义了

authorizer

和

host

值之外，没有什么特别的。目前听起来有点奇怪，太复杂了。感谢您的回复。我将搜索更多示例和详细信息以实现它。按照惯例，动态段应该使用underscore

this.route（'languages'，{path:'shops/：shop_id/languages'}）；

因此您可以调用

返回这个.store.query（'shop-language'，{shop_id:params.shop_id}）；

这应该已经修复了Rails侧的复制。注意，我在处理路由时遇到了

错误：languages Ember数据请求get/shops/undefined/languages返回了404

。我按照您的建议进行了修改。我正在使用

JSONAPIAdapter

（在

adapters/application.js

中定义，除了定义了

authorizer

和

host

值之外，没有什么特别的。目前听起来有点奇怪，太复杂了。感谢您的回复。我将搜索更多示例和详细信息以实现它。按照惯例，动态段应该使用underscore

this.route（'languages'，{path:'shops/：shop_id/languages'}）；

因此您可以调用

返回这个.store.query（'shop-language'，{shop_id:params.shop_id}）；

这应该已经修复了Rails侧的复制。注意，我在处理路由时遇到了

错误：languages Ember Data Request get/shops/undefined/languages返回了404

。我按照您的建议进行了修改。