2012-10-16 84 views
2

我有點迷失在我的視圖渲染 - 第一次嘗試做到這一點。我有我的模板設置類似於這個應用程序。CompositeView沒有渲染ItemViews,甚至沒有觸發appendHtml

到目前爲止,我已經爲CompositeView渲染了模板,但它沒有渲染任何ItemViews。它甚至不觸發渲染方法來嘗試調試所以我不知道在哪裏可以登錄件看到它卡住......下面的代碼:

這是我的ItemView控件:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/service/item.ejs' 
], function($, _, Backbone, template) { 
     ServiceItemView = Backbone.Marionette.ItemView.extend({ 
      tagName: 'tr', 
      template: '#service-item-template' 
     }); 
    } 
); 

這是我CompositeView中:更新:加在我requirejs代碼表明ServiceItemView ServiceTableView之前加載

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/service/item', 
    'text!templates/service/table.ejs' 
], function($, _, Backbone, ServiceItemView, template) { 
    var ServiceTableView; 
     ServiceTableView = Backbone.Marionette.CompositeView.extend({ 
      tagName: 'table', 
      id: 'service-table', 
      itemView: ServiceItemView, 
      itemViewContainer: 'tbody', 
      template: '#service-table-template', 

      appendHtml: function(collectionView, itemView){ 
       console.log("here"); 
       //collectionView.$("tbody").append(itemView.el); 
      } 
     }); 
    } 
); 

這裏就是我試圖使其:

service_collection = new ServiceCollection([ 
     new Service({ 
      name: "Men's Cut", 
      length: 108000, 
      price: 2500 
     }), 
     new Service({ 
      name: "Women's Cut", 
      length: 324000, 
      price: 5000 
     }) 
    ]); 

    service_table = new ServiceTableView({ 
     collection: service_collection 
    }); 

    App.main_region.show(service_table); 

更新:這裏有兩個模板:

ServiceItemView模板:

<script type="text/html" id="service-item-template"> 
    <td><%= name %></td> 
    <td><%= length %></td> 
    <td><%= price %></td> 
    <td class="actions"> 
     <input type="button" class="icon" value="Delete" /> 
    </td> 
</script> 

ServiceTableView模板:

<script type="text/html" id="service-table-template"> 
    <thead> 
     <tr> 
      <th>Name</td> 
      <th>Time allotment</th> 
      <th>Pricing</th> 
      <th class="actions">Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</script> 

同樣,ServiceTableView模板呈現,但沒有的服務在下面呈現。

任何幫助表示讚賞。甚至指向哪裏堅持日誌語句以獲取更多信息。

謝謝!

+0

首先檢查:確保ServiceItemView在ServiceTableView之前聲明。孩子必須在父母面前宣佈(這是Backbone/JavaScript限制,而不是Marionette)。 –

+1

也 - 您可以包括您的表和項目視圖的模板? –

+0

@DerickBailey現在檢查並更新問題,謝謝。 – Matt

回答

0

原來我創造了Collections寫:

Backbone.Model.extend而不是Backbone.Collection.extend。創建集合時,我必須從模型中複製代碼,以加快寫入速度。

現在修復並正在工作,如果有人想使用上面的代碼作爲他們自己的項目的例子。