javascript - Spine.js 和 @navigate() 内容未正确加载

Question

我是 spine 的新手，现在我正在尝试设置我的第一个小应用程序。

我有一个 Posts Controller，其中定义了 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 Controller 我在哪里定义我的 show 和 show_all Controller

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 堆栈管理多个 Controller ，并向应该处于事件状态的 Controller 元素添加“事件”类。

因此，在您的 DOM 中，您应该看到 2 个 Controller 元素都具有堆栈类，并且只有一个 Controller 元素也具有事件类。

CSS 确保隐藏所有不活动的 Controller 。