2

私は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.listDivは変更されません。

何が問題なのですか？

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 に答える