0

次のようなメニューを表示したい：

オビ＝ワン・ケノービ
  私の友人
  オプション

私のライトセーバー
  ブルーライトセーバー
  緑のライトセーバー
  ライトセーバーを追加します

ご覧のとおり、My lightsabersメニューはアイテムのリストですが、新しいライトセーバーを追加するためのリンクは独立しています。

ライトセーバーリストをレンダリングするにはを使用する必要があると思いCollectionViewますが、「追加」リンクをレンダリングするにはどうすればよいですか？

そのようなメニューの例はありますか？

質問は一般化することができます：マリオネットによってレンダリングされたHTMLのビットを、それが行うことを壊すことなくカスタマイズする方法は？

4

1 に答える 1

3

追加リンクが必要なため、これには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-08T13:33:21.417 に答える