Spine.js渲染视图

我使用脊柱刚开始，我无法理解一些东西......Spine.js渲染视图

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

...

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

...我是当控制器被实例化时，希望这样做可以用传递给@html的html代替#data元素中的任何html，但它不会，根本没有任何反应。

我也试过把render方法放在构造函数中，但是没有任何反应。

我如何将取代体与给定的HTML代码的HTML当控制器被实例化？

来源

2012-11-20 Darcbar

问题是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

初始化代码（另一个可能性lity可能是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>

来源

2012-11-20 11:50:15 zbynour

这很有道理，你会介意留下一个非常简单的代码片段，说明如何实现？ – Darcbar

用示例代码编辑的帖子。需要一些模板引擎来配合Spine.js;如上所述，我使用了透明度。 – zbynour

这真是太棒了，只要把它放到与我需要相关的环境中，已经让脊柱看起来更清晰了，谢谢:) – Darcbar

Spine.js渲染视图

回答

相关问题