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' });

但是当我尝试使用/#/post/1之类的网址直接导航到帖子时，我收到错误消息： Assertion failed: Cannot call get with 'id' on an undefined object.

最后，如果我离开我的邮寄路线（/post/:id），那么访问网址/#/post/1不会显示任何帖子数据。我可以看到调用了正确的API端点，并且控制台中没有显示错误。

但是，如果我点击帖子列表中的单个帖子，帖子会正确显示，但它会使用我之前提到的奇怪网址 - #/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方法会在url：/ post / 1，/ post / 2等中知道您需要id的{{1}}属性。在这种情况下需要覆盖。

你已经说过更改为post_id会使url生成有效，但导航没有，当直接导航到url时，问题不在于路由，我认为这是因为你正在使用：

post

您必须更新为：

App.Post.findById(params.id);

我看到的其他问题（不知道是否是拼写错误），你忘记了ajax调用中的App.Post.findById(params.post_id);：

return

我希望它有所帮助。

Answer 2

Ember喜欢你的对象有一个id属性来生成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') };
   }

 });

Ember.js - 让路线和模型协同工作

2 个答案: