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

问题描述

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

I have two very simple Spine.js controllers:

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 标记

and corresponding HTML markup

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

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

My problem is that when controller stack instantiated

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

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

there is no active class added to the div.list element. Divs remain unchanged.

这有什么问题?

推荐答案

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

I've just got it so I'll describe basic working example. There are several issues with the code above (caused by my misunderstanding of how Spine.js controller stack works :-)

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

First, appropriate HTML element have to be associated with every controller managed by the stack. When controller stack instantiates the controller it passes only stack (i.e. itself) instance as parameter to the constructor. So controller constructor have to take it into account (e.g. like the following):

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'

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

then the controller stack could be instantiated:

app = new Application
    el: $ '.mystack'

默认情况下

ListController 将处于活动状态(即相应的 div 添加了 active 类)，以后您可以随时调用 @stack.detail.active() 或 @stack.list.active() 来自控制器实例方法来激活所需的控制器和隐藏"(即删除 active 类) 其他人.

ListController will be active (i.e. corresponding div has active class added) by default and anytime later you can call @stack.detail.active() or @stack.list.active() from controller instance method to activate required controller and 'hide' (i.e. remove active class) the other(s).

我们与@aschmid00 讨论了这个问题.事实上，控制器构造函数不必手动设置自己的属性@stack.它在 super 调用基本构造函数时自动完成.但是在这个问题的情况下，@el 必须设置 before 由于事件委托等原因调用基本构造函数.

We discussed the issue with @aschmid00. In fact, controller constructor doesn't have to set its own property @stack manually. It is done automatically when base constructor called by super. But in case of this question @el have to be set before base constructor called due to the events delegation etc.

这篇关于使用 Spine.js 控制器堆栈时未添加“活动"类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！