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

工作至今... 然后我有一个 posts.main 控制器 我在哪里定义我的 show 和 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

目前还在工作 当我到达时：http://localhost:9294/# 我看到了我的帖子列表。 现在我的目标是：点击帖子时，我想去 /#/post/[ID] 这也有效但是 我总是在帖子详细信息下获得所有可用帖子的列表，而不仅仅是查看所选帖子的信息。 当我按 F5 时，所有帖子的列表都消失了......

为什么会这样？我必须怎么做才能看到帖子相关信息？

Answer 1

所以你遇到的问题是不仅显示了帖子详细信息，还显示了完整的帖子列表？

如果有，您是否添加了必要的 CSS？

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

一个 Spine 堆栈管理多个控制器并向控制器的元素添加一个“活动”类，该元素应该是活动的。

因此，在您的 DOM 中，您应该看到 2 个控制器元素都具有一个堆栈类，并且只有一个具有一个活动类。

CSS 确保隐藏所有不活动的控制器。