Spine.js 渲染视图

Question

我刚开始使用 Spine，但我在理解一些事情时遇到了困难......

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

...

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

...我希望这会在实例化控制器时将 #data 元素中的任何 html 替换为传递给 @html 的 html，但事实并非如此，根本没有任何反应。

我也尝试过将渲染方法放在构造函数中，但还是没有任何反应。

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

Answer 1

问题是 render() 方法没有被调用。

您必须在控制器实例化后显式调用它。

无论如何，我认为您不应该在构造函数中进行任何渲染。 更好的选择是：

• 拥有触发特定事件的模型（MVC 架构） 从服务器加载数据后，
• 控制器应为该事件定义事件处理程序，并将呈现视图。

编辑 只是非常简单的代码 sn-p 怎么可能（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() meth）。然后模板看起来像：

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