2

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

那有什么问题？

4

1 回答 1

4

我刚刚得到它，所以我将描述基本的工作示例。上面的代码有几个问题（由于我对 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设置这个问题。

于 2012-07-13T12:37:50.547 回答