使用 Spine.js 控制器堆栈时未添加“活动”类答案

【问题标题】：'active' class not added when Spine.js controller stack used使用 Spine.js 控制器堆栈时未添加“活动”类
【发布时间】：2012-07-14 15:55:30
【问题描述】：

我有两个非常简单的 Spine.js 控制器：

class ListController extends Spine.Controller
    className: 'list'
    constructor: () ->
        super

class DetailController extends Spine.Controller
    className: 'detail'
    constructor: () ->
        super

控制器堆栈

class Application extends Spine.Stack
    className: 'mystack'
    controllers:
         list: ListController
         detail: DetailController

和相应的 HTML 标记

<div class="mystack">
    <div class="list">list</div>
    <div class="detail">detail</div>
</div>

我的问题是当控制器堆栈实例化时

app = new Application()
app.list.active()

没有active 类添加到div.list 元素。 div 保持不变。

这有什么问题？

【问题讨论】：

可能会省略 className 属性。您还测试 active() 是否通过控制台工作？您是否测试过最基本的设置是否有效？ spinejs.com/docs/stacks
你说得对，className 在这种情况下是无关紧要的。谢谢你。我刚刚找到了解决方案，所以我会在这里发布。

标签： coffeescript spine.js

【解决方案1】：

我刚刚得到它，所以我将描述基本的工作示例。上面的代码有几个问题（由于我误解了 Spine.js 控制器堆栈的工作原理:-)

首先，适当的 HTML 元素必须与堆栈管理的每个控制器相关联。当控制器堆栈实例化控制器时，它仅将stack（即其自身）实例作为参数传递给构造函数。所以控制器构造函数必须考虑到它（例如如下）：

class ListController extends Spine.Controller
    constructor: (parameters) ->
        @stack = parameters.stack
        @el = $ @stack.settings.listSelector
        super

class DetailController extends Spine.Controller
    constructor: (parameters) ->
        @stack = parameters.stack
        @el = $ @stack.settings.detailSelector
        super

和堆栈：

class Application extends Spine.Stack
    settings:
        listSelector: '.list'
        detailSelector: '.detail'
    controllers:
        list: ListController
        detail: DetailController
    default:
        'list'

然后控制器堆栈可以被实例化：

app = new Application
    el: $ '.mystack'

ListController 将默认处于活动状态（即对应的div 添加了active 类），以后您可以随时从控制器实例方法调用@stack.detail.active() 或@stack.list.active() 来激活所需的控制器并“隐藏”（即删除 active 类）其他。

编辑： 我们与@aschmid00 讨论了这个问题。实际上，控制器构造函数不必手动设置自己的属性@stack。当super 调用基本构造函数时，它会自动完成。但是在遇到这个问题时，@el 必须在之前设置由于事件委托等原因调用的基本构造函数。

【讨论】：