使用 ember/handlebars 显示数据的问题

Question

我有几个问题。首先是为什么在使用 each 帮助器时我不能在不放入“模型”的情况下显示数据？我在显示特定于我所在类别的产品时遇到问题？

在此处查看我的检查图像：

目前，当我点击一个类别时，它会显示我的所有产品。

我想显示我的所有类别，然后列出与我点击的类别相关的产品（我需要这些产品随时可用）。我不应该只做以下事情吗？

<ul class="off-canvas-list">
  <li><label>Solution Category</label></li>
  {{#each category}}
  <li class="has-submenu">
    <a href="#">{{name}}</a>
    <ul class="left-submenu">
      <li class="back"><a href="#">Back</a></li>
      {{#each products}}
      <a href="#">{{name}}</a>
      {{/each}}
    </ul>
  </li>
  {{/each}}
</ul>

Router.js

App.Router.map(function () {
  this.route('index', { path: '/' });
  this.route('line-of-one');
  this.route('operating-room');
  this.route('sterile-processing');
  this.route('solution');
  this.route('department');
  this.route('category');
  this.resource('products');
  this.resource('presentations', { path: '/presentations' }, function () {
    // this one is nested and dynamic, we need it to see one user at a time with its id
    this.resource('presentation', { path: '/:presentation_id' }, function () {
      // another nested one for editing the current user
      this.route('edit');
    });
    // and a last one to create users
    this.route('create');
  });

  // this is our 404 error route - see MissingRoute just bellow
  this.route('missing', { path: '/*path' });
});

// this handles wrong routes - you could use it to redirect to a 404 route or like here to redirect to the index page
App.MissingRoute = Em.Route.extend({
  redirect: function () {
    this.transitionTo('index');
  }
});

申请途径

App.ApplicationRoute = Ember.Route.extend({
  model: function () {
    return this.store.findAll('category')
  },
  setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('product', this.store.find('product'));
  }
})

产品路线

App.ProductsRoute = Ember.Route.extend({
  model: function () { return this.store.find('product') }
})

类别模型

App.Category = DS.Model.extend({
  name: DS.attr('string'),
  room: DS.attr('string'),
  subroom: DS.attr('string'),
  products: DS.hasMany('product')
});

App.Category.FIXTURES = [
  {
    id: 0,
    room: "Operating Room",
    subroom: "Operating Room",
    image: "Content/Images/Products/Case-Goods.png",
    name: "Case Goods",
    rendertemplate: "sliderTemplate",
    sort: 10,
    products: [0]
  }
]

产品型号

App.Product = DS.Model.extend({
  name: DS.attr('string'),
  room: DS.attr('string'),
  subroom: DS.attr('string'),
  image: DS.attr('string'),
  category: DS.belongsTo('category')
});

App.Product.FIXTURES = [
  {
    id: 0,
    room: "Operating Room",
    subroom: "Operating Room",
    category: "Case Goods",
    image: "Content/Images/Products/Case-Goods.png",
    name: "Case Goods Solutions",
    content: "Innovations to reduce procedural delays and keep everything at your fingertips.",
    bullets: [
        { content: "Instant access to supplies and equipment to help minimize procedural delays" },
        { content: "Protection of your sterile supplies behind closed doors with durable, easy-to-clean surfaces and either stainless steel or tempered glass door fronts" },
        { content: "Select freestanding or recessed consoles to fit your space" }
    ],
    sellsheet: "Content/Sellsheets/casegoods.html",
    rendertemplate: "valuePropTemplate",
    sort: 0
  }
]

我的导航

<ul class="off-canvas-list">
  <li><label>Solution Category</label></li>
  {{#each category in model}}
  <li class="has-submenu">
    <a href="#">{{category.name}}</a>
    <ul class="left-submenu">
      <li class="back"><a href="#">Back</a></li>
      {{#each product in model}}
      <a href="#">{{{product.name}}}</a>
      {{/each}}
    </ul>
  </li>
  {{/each}}
</ul>

Answer 1

1.你的车把的上下文是控制器，如果你使用下面的sn-p就可以了

{{#with model}}
 {{each product}}
   ...
 {{/each}}
{{/with}}

1. 我看到您没有为/products 实现自定义路由处理程序，因此默认情况下，ember 会假定您正在寻找所有产品。这是有道理的，因为 url 没有关于所选类别的任何信息。您可以在类别中嵌套产品，或者您可以使用Query Paramenters 过滤/products route 上的结果

Answer 2

我不确定如何解释为什么会这样，但是：我将模型数据传递给 ApplicationRoute，因此我不需要为每个通道指定模型。我知道，如果您在与路线关联的视图中并且您只使用 {{#each}} 上下文将是您传递的数据？下面的代码最终工作。如果有人很好地提供解释，将不胜感激！

<ul class="off-canvas-list">
  <li><label>Solution Category</label></li>
  {{#each}}
  <li class="has-submenu">
    <a href="#">{{name}}</a>
    <ul class="left-submenu">
      <li class="back"><a href="#">Back</a></li>
      {{#each products}}
      <a href="#">{{{name}}}</a>
      {{/each}}
    </ul>
  </li>
  {{/each}}
</ul>