Question

我正在阅读阅读列表Ember应用程序。基本上，我正在使用RecordArray称为模型的书籍车把上循环，根据Ember不存在。

这是代码：

Router.map(function() {
  this.route('index', {path: '/'});
  this.resource('books');
  this.route('show', {path: '/books/:book_id'});
  this.route('reviews', function() {
    this.route('new');
  });
  this.route('genre', {path: '/genres/:genre_id'});
});

books.hbs

<ul class="list-unstyled books">
    {{#each books as |book|}}
      {{book-details book=book}}
    {{/each}}
</ul>

book.js路由器

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      books: this.store.find('book'),
      authors: this.store.find('author'),
      genres: this.store.find('genre')
    })
  }
});

books.js控制器

export default Ember.Controller.extend({
  // model is what is returned from the model hook
  books: function() {
    return this.get('model.model');
  }.property('model.model'),
  genres: function() {
    return this.get('model.genres');
  }.property('model.genres'),
  authors: function() {
    return this.get('model.authors');
  }.property('model.authors')
});

访问/books时，一切都按预期工作。但是，访问/时，它无效。 Ember检查器显示存在一个名为books的RecordArray，但它没有呈现它。

index.hbs（/）

<div class="row">
  <div class="col-sm-10">
    {{render 'books' books}}
  </div>
  <div class="col-sm-2">
    {{render 'authors' authors}}
    {{render 'genres' genres}}
  </div>
</div>

index.js路由器

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      books: this.store.find('book'),
      genres: this.store.find('genre'),
      authors: this.store.find('author')
    })
  }
});

index.js控制器

import Ember from 'ember';

export default Ember.Controller.extend({
  books: function() {
    return this.get('model.books');
  }.property('model.books'),
  genres: function() {
    return this.get('model.genres');
  }.property('model.genres'),
  authors: function() {
    return this.get('model.authors');
  }.property('model.authors')
});

Code in Github

由于

Answer 1

如果没有覆盖model属性这一事实，那么model计算属性将是一个无限循环，它会引用自身。

控制器

export default Ember.Controller.extend({
  // model is what is returned from the model hook
  books: Ember.computed.alias('model.model'),
  genres: Ember.computed.alias('model.genres'),
  authors: Ember.computed.alias('model.authors')
});

模板

<ul class="list-unstyled books">
    {{#each books as |book|}}
      {{book-details book=book}}
    {{/each}}
</ul>

更新为修改后的代码：

当您调用渲染时，您将传递books作为模型。它抓取books控制器和books模板，然后控制器中的books属性试图从模型中抓取属性books，这是已经是书籍的集合。只需从您的模板中执行{{render books model}}，或者更好，创建一个共享图书代码的组件，然后您就可以执行此类{{book-list books=model}}等操作。

Ember手柄无法识别传递的RecordArray

1 个答案:

控制器

模板

更新为修改后的代码：