Question

我有两个非常简单的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个类。分区保持不变。

这有什么问题？

Answer 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类）其他（s）的方法。

修改我们用@ aschmid00讨论了这个问题。实际上，控制器构造函数不必手动设置自己的属性@stack。它由super调用的基础构造函数自动完成。但是在这个问题的情况下，{<1}}必须在基础构造函数之前设置，因为事件委托等等。

使用Spine.js控制器堆栈时，不会添加'active'类

1 个答案: