当Spine.js控制器堆栈使用时，'active'类不会被添加 [英] 'active' class not added when Spine.js controller stack used

问题描述

我有两个非常简单的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（）
  

没有将活动类添加到 div.list 元素。

解决方案

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

首先，合适的HTML元素必须与每个控制器由堆栈管理。当控制器栈实例化控制器时，它只将 stack （即本身）实例作为参数传递给构造函数。因此控制器构造函数必须考虑它（例如像下面这样）：

  class ListController extends Spine.Controller 
构造函数：（parameters） - > 
 @stack = parameters.stack 
 @el = $ @ stack.settings.listSelector 
 super 
 
类DetailController extends Spine.Controller 
 constructor：参数） - > 
 @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'
  

b $ b

ListController 将处于活动状态（即对应的 div 有 code>类添加），并且随后可以调用 @ stack.detail.active（）或 @ stack.list.active （）从控制器实例方法激活所需的控制器和'隐藏'（即删除活动类）



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

。

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

controller stack

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

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()

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

What is wrong with that?

解决方案

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 :-)

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

and the stack:

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 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).

EDIT: 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控制器堆栈使用时，'active'类不会被添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！