複合視圖和/或CollectionView將不會呈現表頭

Question

我在複合或集合視圖中呈現標題時出現問題。我嘗試了兩種，但是這不會呈現。

讓我告訴你我的代碼一點點：

// composite view 
define(function(require) { 

    var BusinessTableTemplate = require("text!templates/BusinessTableTemplate.html"); 
    var BusinessRowView = require("views/BusinessRowView"); 
    var Marionette = require("marionette"); 

    return BusinessTableView = Marionette.CompositeView.extend({ 

     tagName: "table", 
     className: "table table-hover", 
     template: BusinessTableTemplate, 
     itemView: BusinessRowView, 
     appendHtml: function(collectionView, itemView){ 
      collectionView.$("tbody").append(itemView.el); 
     } 

    }); 

}); 

// BusinessTableTemplate 
<script type="text/template"> 

    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Address</th> 
      <th>Building</th> 
      <th>Phone</th> 
      <th>Website</th> 
      <th>Categories</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 

</script> 

// itemview 
define(function(require) { 

    var BusinessRowTemplate = require("text!templates/BusinessRowTemplate.html"); 
    var Marionette = require("marionette"); 

    return BusinessRowView = Marionette.ItemView.extend({ 

     template: BusinessRowTemplate, 
     tagName: "tr" 

    }); 

}); 

// BusinessRowTemplate 
<script type="text/template"> 

    <td> 
     <%= name %> 
    </td> 
    <td> 
     <% if (address) { %> 
      <%= address %> 
     <% } else { %> 
      NA 
     <% } %> 
    </td> 
    <td> 
     <% if (building) { %> 
      <%= building %> 
     <% } else { %> 
      NA 
     <% } %> 
    </td> 
    <td> 
    <td> 
     <% _.each(phones, function(phone) { %> 
      <span class="label label-default label-info"><%= phone %></span> 
     <% }); %> 
    </td> 
    <td> 
     <% if (website) { %> 
      <%= website %> 
     <% } else { %> 
      NA 
     <% } %> 
    </td> 
    <td> 
     <% _.each(tags, function(category) { %> 
      <span class="label label-default label-info"><%= category %></span> 
     <% }); %> 
    </td> 
    <td> 
     Ações 
    </td> 
</script> 


// signal or event where I render the view 
vent.on("search:seeAll", function(){ 
    if (self.results) { 
    var businessDirectoryView = new BusinessDirectoryView(); 
    self.layout.modals.show(businessDirectoryView); 
    var resultCollection = new Businesses(self.results, {renderInMap: false}); 
    var businessTableView = new BusinessTableView({ 
     collection: resultCollection 
    }); 
    $("#businesses-container").html(businessTableView.render().$el); 
    } 
}); 

我也跟着教程的地方，但他們並沒有爲表指定標題。

這裏有一點幫助來呈現這個？

謝謝！

Answer 1

什麼是您使用的Marionette JS版本？

以下是使用版本2.4.1（最新的）一個小提琴，這是工作：

https://jsfiddle.net/aokrhw1w/2/

有與以前版本的複合視圖的一些變化，「ItemView控件」被改變到'childView'。

var BusinessTableView = Marionette.CompositeView.extend({ 
    tagName: "table", 
    className: "table table-hover", 
    template: '#BusinessTableTpl', 
    childView: BusinessRowView, 
    childViewContainer: "tbody", 
    appendHtml: function (collectionView, itemView) { 
       console.log('append'); 
       this.$("tbody").append(itemView.el); 
    } 
}); 

希望這可以解決您的問題。

Answer 2

CollectionView呈現集合中每個模型的一個子視圖。它不會給你任何方式添加額外的HTML，比如標題。

CompositeView也呈現集合項目，但您也可以添加額外的HTML。你的例子使用CompositeView，所以你做出了正確的選擇。

因爲您可以在渲染集合周圍定製HTML，所以您需要告訴Marionette渲染集合項目視圖的位置。該childViewContainer屬性確實是：

Marionette.CompositeView.extend({ 
    tagName: "table", 
    className: "table table-hover", 
    template: BusinessTableTemplate, 
    itemView: BusinessRowView, 
    childViewContainer: 'tbody' 
}); 

你並不需要使用attachHtml簡單的情況下，這樣的 - 這是在您需要更改木偶的默認行爲邊緣情況。

查看CompositeView docs瞭解更多詳情。

Answer 3

木偶3不推薦使用CompositeView類。相反，區域現在可以使用內部視圖的呈現內容和new replaceElement option來覆蓋el。

見this example渲染表：

var RowView = Marionette.View.extend({ 
    tagName: 'tr', 
    template: '#row-template' 
}); 

var TableBody = Marionette.CollectionView.extend({ 
    tagName: 'tbody', 
    childView: RowView 
}); 

var TableView = Marionette.View.extend({ 
    tagName: 'table', 
    className: 'table table-hover', 
    template: '#table', 

    regions: { 
    body: { 
     el: 'tbody', 
     replaceElement: true 
    } 
    }, 

    onRender: function() { 
    this.showChildView('body', new TableBody({ 
     collection: this.collection 
    })); 
    } 
}); 

var list = new Backbone.Collection([ 
    {id: 1, text: 'My text'}, 
    {id: 2, text: 'Another Item'} 
]); 

var myTable = new TableView({ 
    collection: list 
}); 

myTable.render(); 

注到過分熱心的版主：我給了同樣的答案here。兩個問題都是而不是重複，但做指的是相同的棄用類。花時間去「tailor the answer to both questions」是沒有意義的;這只是一個浪費時間，因爲唯一重要的部分是：「這個類已被棄用，請使用它，下面是一個示例和鏈接到文檔」。