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

debugcn 发表于 Dev

jd182

我正在学习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"
   }
 }

抱歉，我知道那里有很多东西-我希望足以清楚地说明我做错了什么。

谢谢

马西奥·朱尼（Marcio Junior）

您收到此网址的#/post/<App.Post:ember217>原因是/post/:id，您的动态细分为，因此您必须将其更改yourmodel_id为/post/:post_id。使用此方法，默认情况下，routeserialize方法将知道您想要url的id属性post：/ post / 1，/ post / 2等。在这种情况下，不需要重写。

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

App.Post.findById(params.id);

您必须更新为：

App.Post.findById(params.post_id);

我看到的另一个问题（不知道是否是拼写错误），您忘记了returnajax调用：

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

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

  });

}

希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。