8

使用Backbone.Marionette，我想呈现一个项目的集合以及一个标题。

我知道它Marionette.CollectionView没有模板，因为它只呈现ItemViews。

我目前正在使用Marionette.LayoutView，但必须为“列表”区域定义一个额外的 DOM 元素。

有没有其他方法可以做到这一点？可能没有额外的 DOM 元素？

也许我可以改变open()这个特定的地区？

当前结果：

<div class='collection'>
  <h3>Featured</h3>
  <div class="list"></div>
</div>

期望的结果：

<div class='collection'>
  <h3>List Name</h3>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
</div>

渲染代码：

var col = new LCollection([{name: "foo"}, {name: "bar"}]); // Defined earlier, not relevant here
var list = new ListView({collection: col});
var layout = new MyLayout({model: new Backbone.Model({name: "Featured"})});

app.featured.show(layout);
layout.list.show(list);

意见：

var ListItemView = Backbone.Marionette.ItemView.extend({
  template: '#list-item',
  tagName: 'li'
});

var LessonListView = Backbone.Marionette.CollectionView.extend({
  tagName: 'ul',
  itemView: ListItemView
});

var MyLayout = Backbone.Marionette.Layout.extend({
  template: "list-layout",

  regions: {
    list: '.list'
  }
});

模板：

<script type="text/template" id="list-item">
  <%= name %>
</script>

<script type="text/template" id="list-layout">
  <h3><%= name %></h3>
  <div class="list"></div>
</script>
4

3 回答 3

14

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md

为您申请：

模板

<script id="list-item" type="text/html">
  <%= name %>
</script>

<script id="list-layout" type="text/html">
    <div class='collection'>
        <h3><%= name %></h3>
        <ul></ul>
    </div>
</script>

JS

RowView = Backbone.Marionette.ItemView.extend({
  tagName: "li",
  template: "#list-item"
});

TableView = Backbone.Marionette.CompositeView.extend({
  itemView: RowView,
  // specify a jQuery selector to put the itemView instances in to
  itemViewContainer: "ul",
  template: "#list-layout"
});
于 2013-08-01T04:02:17.860 回答
1

Marionette 3 不再使用CompositeView了，所以如果我们想得到这样的东西：

<div class='collection'>
  <h3>List Name</h3>
  <ul>
    <li>FOO - BAR</li>
    <li>FOO - BAR</li>
    <li>FOO - BAR</li>
    ...
 </ul>
</div>

我们必须在区域中使用CollectionView& View。

1 - 模板

我们将定义两个模板，第一个是“父母”，另一个是父母拥有的每个“孩子”。

父模板.html

<div class='collection'>
    <h3>List Name</h3>
    <ul></ul>
</div>

childTemplate.html

<p>Item <%= value%></p>

2 - 骨干模型和集合

让我们定义一个默认模型及其集合来填充列表。

const Item = Backbone.Model.extend({});
const Items = Backbone.Collection.extend({
    model: Item
});

3 - 视图

首先，我们必须View为我们的子表示创建一个，所以：

import ItemViewTemplate from './childTemplate.html';    

const ItemChildView = Marionette.View.extend({
    template: _.template(ItemViewTemplate),
    className: 'item-child-view',
    tagName: 'li' // <-- The element where we will wrap our item template (it is not defined in the HTML file)
});

其次，我们必须创建一个CollectionView管理每个孩子的，所以：

const ItemsCollectionView = Marionette.CollectionView.extend({
    tagName: 'ul', // <-- The element where we will wrap our collection of items (it is already in the parent HTML file)
    childView: ItemChildView,
    className: 'items-collection-view'
});

最后，我们必须创建View包含 parentTemplate.html 的 main ，并在其中定义将加载元素集合的区域，因此：

import ItemsViewTemplate './parentTemplate.html';    

const ItemsView = Marionette.View.extend({
    tagName: 'div',
    className: 'items-view',
    template: _.template(ItemsViewTemplate),
    regions: {
        body: {
            el: 'ul', // <-- This is the HTML tag where we want to load our CollectionView
            replaceElement: true // <-- With this option, we overwrite the HTML tag with our CollectionView tag
        }
    }
});

4- 代码的其余部分

现在我们创建使其工作所需的实例：

const app = new Marionette.Application({
    region: '#main'
});

// Three simple Items
let item1 = new Item({value: 1});
let item2 = new Item({value: 2});
let item3 = new Item({value: 3});

// Put this Items into a Collection of Items
let items = new Items([item1, item2, item3]);

// Create the main View
let itemsView = new ItemsView();

app.showView(itemsView);

// Create the CollectionView for the Items
let itemsCollectionView = new ItemsCollectionView({
    collection: items
});

// Load the CollectionView of Items into the region that we specified in the main View
itemsView.showChildView('body', itemsCollectionView);

app.start();

5- 结果

如果我们运行它，我们会得到：

<div class="collection">
    <h3>List Name</h3>
    <ul class="items-collection-view">
        <li class="item-child-view"><p>Item1</p></li>
        <li class="item-child-view"><p>Item2</p></li>
        <li class="item-child-view"><p>Item3</p></li>
    </ul>
</div>

希望能帮助到你！参考

于 2017-09-01T10:18:52.833 回答
0

我相信上面的解决方案会将 li 元素直接呈现在包含的 div 或指定的其他区域下，除非您还指定

tagName: "ul"

然后它渲染指定区域内的 ul 元素内的 li 元素。

于 2015-01-27T23:42:55.907 回答