要使用哪個組件來實現菜單？

我想顯示一個菜單，如：要使用哪個組件來實現菜單？

 
Obi Wan Kenobi 
    My friends 
    Options 

My lightsabers 
    Blue lightsaber 
    Green lightsaber 
    Add a lightsaber

正如你所看到的，My lightsabers菜單項的列表，而是添加新的光劍的鏈接是獨立的。

我相信我應該使用CollectionView渲染光劍列表，但如何呈現「添加」鏈接？

你有這樣的菜單的例子嗎？

這個問題可以概括爲：如何自定義Marionette提供的HTML的位而不會破壞它所做的事情？

來源

2012-05-08 Romain Tribes

您可以將'html view'和'model JSON'添加到您的問題 – Deeptechtons

我沒有任何代碼，因爲我完全打開。現在我用渲染器（https://gist.github.com/2634577）使用普通的老式主幹視圖。 –

因爲需要添加鏈接，所以我會使用CompositeView。

您將設置一個包含實際列表佔位符的模板，然後添加鏈接以及所有必要的其他位。然後修改合成視圖的appendHtml方法以將實際項目放置在正確的位置。

例如，這裏有一個模板，將讓你失望的路徑：

<script id="light-saber-menu-template" type="text/html"> 
    <h4>My Lightsabers</h4> 
    <ul id="light-sabers"> 
    <li class="divider"></li> 
    <li><a href="#">Add A Lightsaber</a></li> 
    <ul> 
</script> 

<script id="light-saber-menu-item-view" type="text/html"> 
    <%= name %> 
</script>

在這個例子中，我會使用divider UL中的位置放的物品，分頻器之前插入它們：


MenuItem = Backbone.Marionette.ItemView.extend({ 
    template: "#light-saber-menu-item-template", 
    tagName: "li" 
}); 

MenuView = Backbone.Marionette.CompositeView.extend({ 
    template: "#light-saber-menu-template", 

    itemView: MenuItem, 

    appendHtml: function(cv, iv){ 
    var $divider = cv.$(".divider"); 
    $divider.before(iv.el); 
    } 
}); 

myLightSabers = new LightSaberCollection(... data ...); 

menu = new MenuView({ 
    collection: myLightSabers 
}); 

menu.render();

這將產生與項<ul>你期望：

<div> 
    <h4>My Lightsabers</h4> 
    <ul> 
    <li>Blue</li> 
    <li>Green</li> 
    <li>Red</li> 
    <li class="divider"></li> 
    <li><a href="#">Add A Lightsaber</a></li> 
    </ul> 
<div>

有關使用CompositeView的更多示例，請參閱此博客文章：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

來源

2012-05-08 13:33:21

謝謝Derick，它工作得很好。我被複合視圖嚇倒了，但它似乎是向繪製添加一些HTML的方式。 –

:)很高興它爲你工作！ –

要使用哪個組件來實現菜單？

回答

相關問題