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。会发生什么，

通过{{link-to}}进行转换时，会传递整个模型对象。因此，在this.store.find('course', params.id);中检索课程模型（route#model）时，您拥有id，从而毫无困难地获取模型。
当您点击或刷新课程页面时，您所拥有的只是地址栏网址中的url课程。本课程url（请注意整个课程对象）将传递到您尝试使用route#model检索的课程id。因此它爆炸了

因此，请在路由器中将您的动态细分设为id，以使其正常工作。您还可以使用名称获取记录。

Working Jsbin

Answer 2

正如selvagsz解释的那样，我不得不在路由器中更改：url to：id。

我还想拥有没有嵌套模板的嵌套网址。像这样：

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。

我通过使用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

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

2 个答案: