0

我正在学习 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）然后访问 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"
   }
 }

对不起，我知道那里有很多 - 我希望这足以清楚地说明我做错了什么。

谢谢

4

2 回答 2

1

您收到此网址#/post/<App.Post:ember217>是因为您的动态段是/post/:id，您必须更改为yourmodel_id，在您的情况下是/post/:post_id。使用它，默认情况下，路由serialize方法将知道您需要, 在 url 中的id属性post：/post/1、/post/2 等。在这种情况下不需要覆盖。

您已经说过更改为 post_id 可以生成 url，但是导航没有，直接导航到 url 时，但问题不在于路由，我认为那是因为您使用的是：

App.Post.findById(params.id);

您必须更新为：

App.Post.findById(params.post_id);

我看到的其他问题（不知道是否是拼写错误），您忘记了returnin ajax 调用：

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

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

  });

}

我希望它有所帮助。

于 2013-08-10T22:07:14.190 回答
0

Ember 喜欢您的对象具有用于生成 url 的 id 属性。如果你打算在路由中使用 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') };
   }

 });
于 2013-08-10T21:09:12.157 回答