'主動' 類

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元素。 Divs保持不變。

那有什麼問題？

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時，它會自動完成。但在這個問題的情況下@el必須設置之前基礎構造函數由於事件委託等而調用。