Question

我有几个问题。第一个是为什么我不能在不在模型中放置数据的情况下显示数据。什么时候使用每个助手？此外，我还有问题显示特定于I类别的产品？

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

http://oi57.tinypic.com/260d7nm.jpg

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

我想显示我的所有类别，然后列出与我点击的类别相关联的产品（我需要始终提供这些产品）。难道我不能做到以下几点吗？

<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.你的把手的上下文是控制器，如果你使用下面的代码片段就行了

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

我发现你没有为/products实现自定义路由处理程序，所以默认情况下，ember会假设您正在寻找所有产品。这是有道理的，因为网址没有任何关于所选类别的信息。您可以在类别中嵌套产品，也可以使用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>

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

2 个答案: