Ember.js 嵌套架构

Question

首先，我对 Ember.js 还是很陌生，但我一直在阅读书籍和学习教程，现在我想制作一个应用程序，但我需要指出正确的方向。假设我想制作一个带有一系列下拉框的车辆设计师，这里有一些示例车辆：

• 汽车
  • 品牌：宝马
    • 型号：3系列
      • 颜色：白色、黑色、绿色、黄色
      • 发动机：2.0L、3.0L
      • 内饰：黑色、米色、棕色
    • 型号：5系列
      • 颜色：白色、黑色、绿色、黄色
      • 发动机：2.0L、3.0L、4.4L
      • 内饰：黑色
  • 品牌：奥迪
    • 型号：A3
      • 颜色：黑色、红色、灰色
      • 发动机：2.0L
      • 内饰：蓝色、红色、水蓝色
• 卡车
  • 制造商：福特
    • 型号：F150
      • 颜色：黑色、棕色、棕褐色
      • 发动机：3.5L、3.7L、5.0L、6.2L
      • 床尺寸：5 英尺、7 英尺
    • 型号：F250
      • 颜色：黑色、绿色、红色
      • 发动机：6.2L、6.7L
      • 床尺寸：5 英尺、7 英尺
  • 品牌：道奇
    • 型号：公羊
      • 颜色：蓝色、粉色、橙色
      • 发动机：6.0L
      • 床尺寸：5 英尺、6 英尺

仅在此示例中，它们将是 87 种不同的车辆组合，但一个完整的应用程序可能包含数十万辆车辆。理想情况下，用户可以收藏并分享他们提出的设计，因此 URL 可以嵌套如下：

设计师#/truck/ford/f150/tan/3.5l/7

由于嵌套架构方法可能一团糟，另一种可能是查询字符串（尽管我知道它目前仍是一个实验性功能），例如：

designer?type=truck&make=ford&model=f150&color=tan&engine=3.5l&bed-size=7

首先，Ember.js 是适合这项工作的工具吗？我将如何处理不同的属性（例如汽车有内部颜色，但卡车有床尺寸）？我还在学习，所以任何帮助都将不胜感激，即使你只是指出我正确的方向。

Answer 1

Here's a working demo with nested routes.

路线看起来像

App.Router.map(function() {
  this.resource('vehicles', {path: '/:vehicle_type'},function() {
    this.route('vehicle', {path:'/:vehicle_make'});
  });
});

您可以根据数据的可用性来渲染内部颜色和床尺寸。这是通过车把完成的

{{#if item.interior}}
  <p>Interior: Color {{item.interior}}</p>
{{/if}}
{{#if item.bed_size}}
  <p>Bed Size: {{item.bed_size}}</p>
{{/if}}