1

我刚开始使用脊柱，我无法理解一些事情......

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

...

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

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

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

实例化控制器时，如何用给定的 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 中）并且我使用了Transparency模板引擎（它是@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 回答