Javascript 在MarionetteJS ComspositeView中创建包装器

您好，亲爱的SO用户和贡献者。我不确定如何使用基于BackboneJS的JS框架MarionetteJS操作CompositeView。希望有人能给我一些关于如何继续下去的建议

应用程序上下文：我正在构建的应用程序是一个可以接受可拖动项的网格。该网格是使用两个CompositeView来构建页面部分中的行，以及网站上实际表示的每个字段的ItemView来构建的

应用程序视图：我拥有一个gridView，其中包含一组gridModels，这些gridModels在initialize方法中被拆分为多行。这将在HTML中生成一个包含网格的部分。gridRowView将从所有gridItems为gridView构建中的每一行生成一个类为“day”的div

有人提到，在前面一个与我的网格相关的问题中，treeView可能更适合这个目的。但我觉得这与我的问题范围无关

应用程序模板：

<!-- Grid templates -->
<script type="text/template" id="grid-item-template">
    <div class="gridItem droppable" id="{{cid}}"><b>{{data}}</b></div>
</script>

<script type="text/template" id="grid-row-template">
    <div class="day"></div>
</script>

<script type="text/template" id="grid-template">
    <section></section>
</script>

{{data}}

问题：下面的代码（不包括事件包装器）类似于DOM中的结构化代码。正如您所看到的，视图生成了预期的结果。但是，我现在需要使用定位将项目放置在网格上。为了做到这一点，我在该部分周围使用了div容器的开头（网格的开头）

虽然这是可行的，但一旦引入滚动条，这将成为一个问题。由于网格的起始位置实际上没有改变，您可以向下滚动，但订单将始终保持在屏幕外的相同位置

可能的解决方案：看着谷歌日历，我意识到他们在自己的行中使用了一个额外的事件包装器来定位。这对我来说似乎是合乎逻辑的，因为确定位置的偏移量不再是网格的开始，而是行的开始（类“day”）。这将解决滚动条可能造成的问题

在我看来，这类似于下面的代码：

<section>
<div> <!-- wrapper generated by framework -->
<div class="day">
    <div class="event-x"> <!-- used as offset for positioning -->
       <div id="c39" class="gridItem droppable"> <!-- grid column --></div>
    </div>
</div>
<div>
</section>

我的问题：因为我的行（类为“day”的div）是由木偶技术公司的CompsositeView自动生成的，所以我无法给它一些唯一的值来标识它，而该值不会改变。使用具有唯一标识符的附加事件包装器很可能解决我的问题，因为这样我就可以使用jQuerySelector从该元素获取定位

然而。。。木偶网实际上为我生成了包装，我不确定如何在这一行中添加一个包装，并在这一行的顶部添加一个唯一的包装。你们中有谁（有木偶或脊梁的经验）知道怎么做吗

---

我看的方向对吗？任何帮助都将不胜感激。

如果您只需要为由

视图生成的包装器分配唯一的id/类，下面的答案可能会有所帮助。注意，它实际上并没有任何额外的包装器，它只是向自动生成的包装器添加属性的一种方式

您可以为
视图
（或扩展它的任何内容，例如
复合视图
）定义属性。这些属性将自动分配给包装器元素。您可以在或中将它们定义为

如果只需要静态标识符，请使用第一种方法：

planboard.gridRowView = Backbone.Marionette.CompositeView.extend({
    template: "#grid-row-template",
    itemView: planboard.gridItemView,
    itemViewContainer: "div.day",
    id: "some-id",
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

planboard.gridRowView = Backbone.Marionette.CompositeView.extend({
    template: "#grid-row-template",
    itemView: planboard.gridItemView,
    itemViewContainer: "div.day",
    attributes: function() {
        return {
            id: this.model.get("id") // or something like this
        };
    },
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

如果需要根据模型生成id，请使用第二种方法：

planboard.gridRowView = Backbone.Marionette.CompositeView.extend({
    template: "#grid-row-template",
    itemView: planboard.gridItemView,
    itemViewContainer: "div.day",
    id: "some-id",
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

planboard.gridRowView = Backbone.Marionette.CompositeView.extend({
    template: "#grid-row-template",
    itemView: planboard.gridItemView,
    itemViewContainer: "div.day",
    attributes: function() {
        return {
            id: this.model.get("id") // or something like this
        };
    },
    initialize: function() {
        this.collection = new Backbone.Collection(_.toArray(this.model.attributes));
    }
});

这非常接近我想要的。我可以用第一种和第二种方法很好地工作。但这会将ID应用于行模板周围的包装器，而不是应用于具有“div.day”类的实际div。