Spine.jsと@navigate（）の内容が正しく読み込まれていない

Question

私は背骨が新しく、今は最初の小さなアプリをセットアップしようとしています。 2つのルート定義場所

私は投稿コントローラーを持っている：

class Posts extends Spine.Controller 
    className: 'posts' 

    constructor: -> 
    super 

    @main = new Main 

    @routes 
     '/post/:id': (params) -> 
    @main.show.active(params) 
     '/posts': -> 
    @main.show_all.active() 

    @append @main 

は、これまでの作業のすべての投稿を示す 特定のポストを示す1つずつを... それから私はposts.mainを持っていますhttp://localhost:9294/# 私はLISを参照してください。コントローラ私は私のショーやSHOW_ALLコントローラを定義

Post = require('models/post') 

class Show extends Spine.Controller 
    className: 'show' 

    constructor: -> 
    super 
    @active @load 

    load: (params) => 
    @item = Post.find(params.id) 
    @html require('views/post')(@item) 

class Show_all extends Spine.Controller 
    className: 'show_all' 

    events: 
    "click .items" : "click" 

    constructor: -> 
    super 
    @active @load 

    load: => 
    @item = Post.all() 
    @html require('views/posts')(@item) 

    change: (postId) => 
    @navigate("/post", postId) 

    click: (event) -> 
    @change(event.target.id) 

class Main extends Spine.Stack 
    className: 'main Stack' 
    controllers: 
    show: Show 
    show_all : Show_all 

module.exports = Main 

はまた、これまで 私が着いたときの作業します私の投稿のt。 私の目標は次のとおりです：投稿をクリックすると、/＃/投稿/ [ID] にも行きますが、これも動作しますが 選択した投稿の情報を見るのではなく、投稿の詳細の下に F5を押すと、すべての投稿のリストが消えてしまいました...

どうしてですか？私はちょうどポスト関連の情報を見るために何をしなければならないのですか？

Answer 1

だから問題は、投稿の詳細だけでなく投稿の完全なリストも表示されていることです。

もしそうなら、必要なCSSを追加しましたか？

.stack > *:not(.active) { display: none } 

Spineスタックは、複数のコントローラを管理し、アクティブでなければならないコントローラの要素に「アクティブ」クラスを追加します。

あなたのDOMでは、2つのコントローラー要素がスタックのクラスとアクティブなクラスのクラスだけで表示されるはずです。

CSSは、すべての非アクティブコントローラを非表示にします。