Ember.js - Получение маршрутов и моделей, работающих вместе

Question

Я изучаю Ember.js, но я изо всех сил пытаюсь понять, почему мои маршруты работают неправильно.

Вот соответствующие части моего app.js:

// Routes 
App.Router.map(function() { 

    this.resource('posts', { path: '/posts' }); 
    this.resource('post', { path: '/post/:id' }); 

}); 

// Handle route for posts list 
App.PostsRoute = Ember.Route.extend({ 

    model: function() { 
     return App.Post.findAll(); 
    } 

}); 

// Handle route for single post 
App.PostRoute = Ember.Route.extend({ 

    model: function(params){ 

     return App.Post.findById(params.id); 
    } 

}); 

// Post model 
App.Post = Ember.Object.extend(); 

App.Post.reopenClass({ 
    findAll: function(){ 

     var posts = []; 

     $.getJSON("/api/posts").then(function(response){ 

      response.posts.forEach(function(post){ 

       posts.pushObject(App.Post.create(post)); 

      }); 

     }); 

     return posts; 
    }, 
    findById: function(id){ 

     $.getJSON("/api/post/" + id).then(function(response){ 

      return App.Post.create(response.post); 

     }); 

    } 
}); 

Тогда в моем шаблоне у меня есть это:

<!-- Post list --> 
<script type="text/x-handlebars" data-template-name="posts"> 
    <div class="large-12 columns"> 
     <h1>Posts</h1> 
     <hr> 
     <ul> 
      {{#each post in model}} 
       <li>{{#linkTo 'post' post}}{{post.title}}{{/linkTo}}</li> 
      {{/each}} 
     </ul> 
    </div> 
</script> 

<!-- Single post --> 
<script type="text/x-handlebars" data-template-name="post"> 
    <div class="large-12 columns"> 
     <h1>{{title}}</h1> 
     <div class="content"> 
      {{post_content}} 
     </div> 
    </div> 
</script> 

У меня несколько вопросов здесь. Во-первых, HREF атрибута по ссылкам в списке сообщению выходят так:

#/post/<App.Post:ember217>

я могу это исправить, изменив свой почтовый маршрут:

this.resource('post', { path: '/post/:post_id' }); 

Но тогда, когда я пытаюсь чтобы перейти непосредственно к сообщению, используя URL-адрес, как /#/post/1 я получаю сообщение об ошибке: Assertion failed: Cannot call get with 'id' on an undefined object.

Наконец, если я оставлю свой пост маршрут, как это (/post/:id), то Visi t URL /#/post/1 ни одна из данных сообщения не отображается. Я вижу, что правильная конечная точка API вызывается, и на консоли не отображаются ошибки.

Однако, если я перейду к одному сообщению из списка сообщений, сообщение отображается правильно, но оно использует странный URL, о котором я упоминал ранее, - #/post/<App.Post:ember217>.

Если это помогает, это JSON почтовые модели созданы из:

{"post": 
    { 
     "id":2, 
     "title":"Second post", 
     "alias":"second-post", 
     "postedOn":"2013-08-12 09:11:37", 
     "authorId":1, 
     "post_content":"Post content" 
    } 
} 

К сожалению я знаю, что есть совсем немного там - я надеюсь, что это достаточно, чтобы дать четкую картину того, что я делаю неправильно.

Спасибо

Answer 1

Вы получаете этот адрес #/post/<App.Post:ember217>, потому что ваш динамический сегмент /post/:id, вы должны изменить к yourmodel_id, в вашем случае /post/:post_id. Используя это, по умолчанию маршрут serialize будет знать, что вы хотите присвоить id атрибут post, в url:/post/1,/post/2 и т. Д. И в этом случае не потребуется переопределять.

Вы сказали, что не меняется в POST_ID сделать работы поколения URL, но навигация не при навигации по прямой ссылке, но проблема не маршрутизации, я думаю, что это потому, что вы используете:

App.Post.findById(params.id); 

вы должны обновить до:

App.Post.findById(params.post_id); 

Другая проблема, которую я вижу (не знаю, если это опечатка ошибка), вы забыли return в Ajax вызова:

findById: function(id){ 
    // you must return the ajax 
    return $.getJSON("/api/post/" + id).then(function(response){ 

    return App.Post.create(response.post); 

    }); 

} 

Надеюсь, это поможет.

Answer 2

Ember любит ваши объекты имеют свойство идентификатора для генерации URL. Если вы собираетесь использовать что-то другое, кроме id в маршруте (например, post_id), вам нужно сообщить Ember, как десериализовать вашу модель для генерации URL-адреса.

App.PostRoute = Ember.Route.extend({ 

    model: function(params){ 

     return App.Post.findById(params.id); 
    }, 
    serialize: function(model) { 
     return { id: model.get('id') }; 
    } 

}); 



App.PostRoute = Ember.Route.extend({ 

    model: function(params){ 

     return App.Post.findById(params.id); 
    }, 
    serialize: function(model) { 
     return { post_id: model.get('post_id') }; 
    } 

});