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>ダイナミック セグメントが であるため、この URL を受信して​​います。/post/:id変更する必要がありyourmodel_idます。この場合は/post/:post_idです。これを使用すると、ルートserializeメソッドはデフォルトで、/post/1、/post/2 などの URL に の属性が必要であることを認識します。その場合、オーバーライドは必要ありませんid。post

post_id に変更するとURL生成が機能すると言われましたが、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);

  });

}

お役に立てば幸いです。

于 2013-08-10T22:07:14.190 に答える