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渲染視圖

回答

相關問題