1

背骨を使い始めたばかりですが、いくつかのことを理解するのに苦労しています...

class Spk.Register extends Spine.Controller
  render: ->
    @html("<h1>Registration!</h1>")

..。

Zepto(function($) {
  new Spk.Register({
    el: $("#data")
  });
});

...これにより、コントローラーがインスタンス化されたときに#data要素内のhtmlが@htmlに渡されたhtmlに置き換えられることを期待していましたが、そうではなく、何も起こりません。

また、renderメソッドをコンストラクター関数に入れてみましたが、何も起こりません。

コントローラがインスタンス化されたときに、本文のhtmlを特定のhtmlに置き換えるにはどうすればよいですか？

4

1 に答える 1

2

問題は、render()メソッドが呼び出されないことです。

コントローラがインスタンス化された後、明示的に呼び出す必要があります。

とにかく、コンストラクターでレンダリングを行うべきではないと思います。より良いオプションは次のとおりです。

  • サーバーからデータがロードされた後に特定のイベントをトリガーするモデル（MVCアーキテクチャ）を使用するには、
  • コントローラはそのイベントのイベントハンドラを定義する必要があり、ビューをレンダリングします。

編集 非常に単純なコードスニペット（CoffeeScript、jQueryを使用）：

Taskモデルクラス：

class Task extends Spine.Model

  @configure 'Task', 'name', 'deadline'

  @fetch () ->
    Task.deleteAll()
    # ... load data from the server ...
    Task.create name: 'foo', deadline: '2012-11-22' # create local instance(s)
    Task.trigger 'data-loaded'
    return

コントローラー：

class Tasks extends Spine.Controller

  constructor: ->
    super

  init: () ->
    @routes
        'list': (params) ->
            Task.fetch()
            return
    Task.bind 'data-loaded', () => 
        @render()
        return
    return

render: () ->
    @el.render Task.all()
    return

初期化コード（別の可能性はSpine.jsコントローラースタックである可能性があります）：

tasksCtrl = new Tasks el: $('.task-list')
tasksCtrl.navigate 'list'

route.js（Spine.jsに含まれている）も必要であり、透明性テンプレートエンジン（これは@el.render()meth）を使用していることに注意してください。次に、テンプレートは次のようになります。

<div class="task-list">
    <div class="task">
        <span data-bind="name"></span>
        <span data-bind="deadline"></span>
    </div>
 </div>
于 2012-11-20T11:50:15.410 に答える