Spine.js呈现视图

Question

我刚刚开始使用spine，我在理解一些事情上有困难……

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

..。

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

...I期望在实例化控制器时，用传递给@html的html替换#data元素中的任何html，但它没有，什么也没有发生。

我也尝试过将render方法放入构造函数中，但同样没有任何反应。

在实例化控制器时，如何用给定的html替换body中的html？

Answer 1

问题是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中)，并且我已经使用了Transparency模板引擎(它是@el.render()方法)。然后，模板如下所示：

<div class="task-list">
    <div class="task">
        <span data-bind="name"></span>
        <span data-bind="deadline"></span>
    </div>
 </div>