Backbone.Marionette:将标题添加到集合视图

Backbone.Marionette: Add header to collection view

本文关键字：集合 视图 添加 标题 Marionette Backbone      更新时间：2023-09-26

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

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

我目前正在使用 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>

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"
});
木

偶 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>

儿童模板.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在此我们定义了将加载元素集合的区域，因此：

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>

希望对您有所帮助！参考

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

tagName: "ul"

然后，它在指定区域内的 ul 元素中呈现 li 元素。

相关文章：