如何重定向到EMberjs中的嵌套动态段 [英] How to redirect to a nested dynamic segments in EMberjs

问题描述

如果我们有几本书，每本书包含几章，每章包含几页。

在应用程序中，
当用户导航到

/ home

列出所有图书，点击一本书（例如：book_1）将直接linkTo

/ book_1 / chapter_1 / page_1

显示所选内容中的chapter_1 / page_1

我现在试图使用重定向钩子，但我对这些错误感到困惑：

1，如何将muti参数发送到重定向钩子;

2，如何在重定向后正确更新URL？

3，什么是Ember方式这样做？

_ 书籍模型 __

  App.Book = DS.Model.extend（{
 name：DS.attr（'string'）， 
章节：DS.hasMany（'chapter'，{async：true}），
 color：DS.attr（''）
}）; 
 
 App.Chapter = DS.Model.extend（{
 name：DS.attr（'string'），
作者：DS.attr（''），
页：DS.hasMany（'page'，{async：true}）
 
}）; 
 
 App.Page = DS.Model.extend（{
 name：DS.attr（'string'），
}）; 
 App.Book.FIXTURES = [
 {
 id：1，
 name：'book1'，
 color：'red'，
 chapterters： [1,2] 
}，
 {
 id：2，
名称：'book2'，
颜色：'蓝色'，
章节： [3,4] 
} 
]; 
 
 
 
 App.Chapter.FIXTURES = [
 {
 id：1，
 name：'Chapter1'，
作者：'jhon'，
页：[1,2] 
}，
 {
 id：2，
名称：'Chapter2'，
作者：'jhon'，
页：[3,4] 
}，
 {
 id：3，
名称：'Chapter3'，
作者：'peter'，
 pages：[5,6] 
}，
 {
 id：4，
 name：'Chapter4'，
作者：'tom'，
页：[7,8] 
} 
]; 
 
 App.Page.FIXTURES = [
 {
 id：1，
 name：'page1'，
}，
 {
 id：2，
 name：'page2'，
}，
 {
 id：3，
 name：'page3'，
 }，
 {
 id：4，
 name：'page4'，
}，
 {
 id：5，
 name： 'page5'，
}，
 {
 id：6，
 name：'page6'，
}，
 {
 id： 7，
名称：'page7'，
}，
 {
 id：8，
名称：'page8'，
} 
 ]。 
  

解决方案

重定向已弃用，请使用afterModel钩子。我将id和id的id发送到章节和页面路由，这应该是他们的模型钩子。您的数据如何分离，图书模型是否具有所有必要的信息？

http://emberjs.jsbin.com/uDiLIkij/6/edit

  afterModel：function（model，transition）{
 console.log（transition.targetName）; 
 if（transition.targetName =='book.index'）{
 var self = this; 
 model.get（'chapters'）然后（function（chs）{
 var ch = chs.get（'firstObject'）; 
 ch.get（'pages'） （function（pages）{
 var page = pages.get（'firstObject'）; 
 self.transitionTo（'page'，model，ch，page）; 
}）; 
}）; 
 transition.abort（）; 
} 
}，
  

If we have several books,each books contains several chapters and each chapter contains several pages.

In an App, when user navigate to

"/home"

list all the books,clicking a book(eg:book_1) will directly "linkTo"

"/book_1/chapter_1/page_1"

show the content of "chapter_1/page_1" within the selected book.

I am now trying to use the "redirect" hook,but I am confused with these:

1,How to sent muti params to a redirect hook;

2,How to update the URL correctly after redirecting?

3,What is the "Ember way" to do this?

_BOOK MODEL__

App.Book = DS.Model.extend({
name: DS.attr('string'),
chapters: DS.hasMany('chapter',{async:true}),
color: DS.attr('')
});

App.Chapter = DS.Model.extend({
name: DS.attr('string'),
author: DS.attr(''),
pages: DS.hasMany('page',{async:true})

});

App.Page = DS.Model.extend({
name: DS.attr('string'),
});
App.Book.FIXTURES = [
{
id: 1,
name: 'book1',
color: 'red',
chapters: [1,2]
},
{
id: 2,
name: 'book2',
color: 'blue',
chapters: [3,4]
}
];



App.Chapter.FIXTURES = [
{
id: 1,
name: 'Chapter1',
author: 'jhon',
pages:[1,2]
},
{
id: 2,
name: 'Chapter2',
author: 'jhon',
pages:[3,4]
},
{
id: 3,
name: 'Chapter3',
author: 'peter',
pages:[5,6]
},
{
id: 4,
name: 'Chapter4',
author: 'tom',
pages:[7,8]
}
];

App.Page.FIXTURES = [
{
id: 1,
name: 'page1',
},
{
id: 2,
name: 'page2',
},
{
id: 3,
name: 'page3',
},
{
id: 4,
name: 'page4',
},
{
id: 5,
name: 'page5',
},
{
id: 6,
name: 'page6',
},
{
id: 7,
name: 'page7',
},
{
id: 8,
name: 'page8',
}
]; 

解决方案

redirect is deprecated, use the afterModel hook. I'm sending in ids of 1 and 1 to the chapter and page route, which should hit their model hooks. How is your data separated, does the book model have all the necessary info?

http://emberjs.jsbin.com/uDiLIkij/6/edit

afterModel: function(model, transition){
    console.log(transition.targetName); 
    if(transition.targetName=='book.index'){
      var self = this;
      model.get('chapters').then(function(chs){
        var ch = chs.get('firstObject');
        ch.get('pages').then(function(pages){
          var page = pages.get('firstObject');  
          self.transitionTo('page', model, ch, page);
        });
      });
      transition.abort();
    }      
},

这篇关于如何重定向到EMberjs中的嵌套动态段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！