Ember 直接 URL 或页面刷新空模型

Question

我有一个包含不同课程的索引页面。从该索引页面，您可以通过链接导航到特定课程。当我导航到课程时，一切正常，但是当我刷新页面或直接转到该 URL 时，模型为空。

这就是我的代码的样子：

index.hbs ---------------------------------------
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
    <h1>Become a Tjuna Fish</h1>
    <img src="http://placehold.it/500x300">
    <p>Leer met de technieken werken die bij Tjuna worden gebruikt en ontwikkel    jezelf tot een echte Tjuna Fish!</p>
   </div>
  </div>

  <div class="row">
    <h1 class="text-center">Cursussen</h1>
    {{#each}}
        <div class="col-md-4 text-center">
        <div class="row">
            <img {{bind-attr src="img"}}/>
        </div>
        <div class="row">
          {{#link-to "course" this}}{{title}}{{/link-to}}
        </div>
    </div>
    {{/each}}
    </div>

scripts ---------------------------------------
BecomeTjunaFish.Router.map(function () {
// Add your routes here
 this.resource('index', {path: '/'});
 this.resource('course', { path: ':url'});

});

BecomeTjunaFish.IndexRoute = Ember.Route.extend({
 // admittedly, this should be in IndexRoute and not in the
 // top level ApplicationRoute; we're in transition... :-)
 model: function () {
    return this.store.find('course');
 }

});

BecomeTjunaFish.CourseRoute = Ember.Route.extend({
 // admittedly, this should be in IndexRoute and not in the
 // top level ApplicationRoute; we're in transition... :-)
 model: function (params) {
    return this.store.find('course', params.id);
 }

});

BecomeTjunaFish.Course = DS.Model.extend({
 title: DS.attr('string'),
 img: DS.attr('string'),
 goal: DS.attr('string'),
 targetGroup: DS.attr('string'),
 prerequisites: DS.attr('string'),
 url: DS.attr('string')
});

BecomeTjunaFish.Course.FIXTURES = [
 {
  id: 1,
  title: 'Tjuna Basis',
  img: 'http://placehold.it/200x200',
  goal: 'kunnen werken met de basis tools en opmaaktalen die Tjuna gebruikt',
  targetGroup: 'frontend developers in wording',
  prerequisites: 'geen',
  url: 'basis_cursus'
 },
 {
  id: 2,
  title: 'Tjuna Frontend',
  img: 'http://placehold.it/200x200',
  goal: '',
  targetGroup: '',
  prerequisites: '',
  url: 'frontend_cursus'
 },
 {
  id: 3,
  title: 'Tjuna Backend',
  img: 'http://placehold.it/200x200',
  goal: '',
  targetGroup: '',
  prerequisites: '',
  url: 'backend_cursus'
 }
];

Answer 1

您需要在路由器中将动态网段指定为:id。发生了什么，

1. 当您通过{{link-to}} 转换时，您会传递整个模型对象。因此，在检索 route#model 中的课程模型（this.store.find('course', params.id);）时，您可以随身携带 id，从而轻松获取模型。

2. 当您回击或刷新课程页面时，您所拥有的只是地址栏 URL 中的课程url。这门课程url（注意整个课程对象）将被传递给课程route#model 钩子，您可以在其中尝试使用id 进行检索。因此它爆炸了

因此，将您的动态段设置为路由器中的id 以使其工作。您还可以获取带有名称的记录。

Working Jsbin

Answer 2

正如 selvagsz 解释的那样，我必须在路由器中将 :url 更改为 :id 。

我还希望有没有嵌套模板的嵌套 URL。像这样的：

this.resource('index', {path: '/'});
this.resource('course', { path: ':course_id'}, function(){
  this.resource('lesson', {path: ':lesson_id'}, function(){
    this.resource('topic', {path: ':topic_id'});
  });
});

问题在于，当我转到课程/课程 url 时，课程模板只会在我在课程模板中有出口时呈现。我希望将课程模板替换为课程模板，但保留相同的嵌套 url。

我通过使用 Ember 的 renderTemplate 函数解决了这个问题：

BecomeTjunaFish.LessonRoute = Ember.Route.extend({
  model: function (params) {
   return this.store.find('lesson', params.lesson_id);
  },
  renderTemplate: function() {
  this.render('lesson', { into: 'application'})
  }
});

这很好用，但是当我返回到课程时，它不再工作了。除了只有一个 courseRoute，我还需要一个 courseIndexRoute，它使用与 courseRoute 相同的模型，并将 renderTemplate 放在 CourseIndexRoute（与 LessonIndexRoute 相同）。示例：

BecomeTjunaFish.CourseRoute = Ember.Route.extend({
 model: function (params) {
    return this.store.find('course', params.course_id);
 }

});

BecomeTjunaFish.CourseIndexRoute = Ember.Route.extend({
 model: function () {
  return this.modelFor('course');
 },
 renderTemplate: function() {
   this.render('course', { into: 'application'})
 }

});

对我来说，这似乎是很多代码，我不知道这是否是正确的方法。目前这对我来说已经足够好了，它正在工作:) 但我很感激能得到反馈，并想知道是否有其他/更好的方法来解决这个问题。

*我以这个问题为灵感：Redirecting from edit to parent resource doesn't (re)render template