使用 Marionette 在 CompositeView 中创建 Itemview答案

【问题标题】：creating an Itemview inside a CompositeView with Marionette使用 Marionette 在 CompositeView 中创建 Itemview
【发布时间】：2013-11-15 19:44:27
【问题描述】：

我正在尝试构建一个应用程序，其中有一个处理鼠标事件的CompositeView，允许您在其中绘制矩形（CompositeView 是矩形的集合）。我正在计算/存储CompositeView 内的矩形（基本上是宽度、高度、顶部、左侧和边框 css 属性）所需的所有数据。

因为我在计算东西，所以我使用了itemViewOptions 函数，它返回一个包含所有必要数据的对象，该对象将作为选项传递给我的ItemView (RectangleView)。

在ItemView 的initialize 方法中，我调用了setCssStyle 方法，它将css 属性应用于视图。

这是我的 CompositeView (ScreenView) 和 ItemView (RectangleView) 代码（为简洁起见，省略了计算和数据停止方法）

var RectangleView = Backbone.Marionette.ItemView.extend({
  template: "<div>I am a rectangle</div>",
  className: "rectangle",

  initialize: function(options){
    this.left = options.left;
    this.top = options.top;
    this.width = options.width;
    this.height = options.height;
    this.border = options.border;
    this.setCssStyle();
  },
  setCssStyle: function () {
    this.$el.css({
      'width': this.width + 'px',
      'height': this.height + 'px',
      'top': this.top + 'px',
      'left': this.left + 'px',
      'border': this.border
    });
  }
});


var ScreenView = Backbone.Marionette.CompositeView.extend({
  template: "<div>  </div>",
  className:"screen",
  itemView: RectangleView,

  itemViewOptions: function() {
    return {
      left: this.left,
      top: this.top,
      width: this.width,
      height: this.height,
      border: this.border
    }
  },

[...]

});

我已经读到我需要重写 buildItemView 方法并传递 3 个参数：item, ItemViewType, itemViewOptions 根据 Marionette Documentation

问题是我有点困惑，我真的不知道我应该传递的item 参数是什么。它是 ItemView 的模型吗？我尝试了不同的东西并不断出错，所以我很可能在这里遗漏了一些基本的东西。

另外，目前我的 RectangleView 没有模型。我应该创建一个，如何将itemViewOptions 从我的CompositeView 传递给我的ItemView 并最终传递给模型？

如果我没有很好地解释我的问题，我提前道歉，但我的大脑感觉有点糊状

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

好吧，我自己设法解决了这个问题，我想我需要一些睡眠来理清头绪！我不知道这是否是最佳解决方案，但它对我有用。

首先，我已经从CompositeView 切换到CollectionView，因为我不需要递归。我还创建了一个空的 Rectanglemodel 和一个 Rectangles 集合。

在我的 App.Initializer 中，当我显示 CollectionView 时，我还将矩形集合传递给它！ .show(new ScreenView({collection: rectangles}));

现在，您可能还记得，整个交易是能够在 CollectionView 内绘制矩形，在 CollectionView 内绘制的矩形将被添加到一个集合中（每个都有一个模型等......）

放置该代码的理想位置是在我的 CollectionView 中的 mouseup 事件上（想想看，您单击--> 拖动--> 释放鼠标按钮以绘制一个框）

[...]
  handleMouseUp: function(e) {
    [...]
    if (this.dragging===1) {

      //passing the itemViewOptions on a helper
      var modelHelper = this.itemViewOptions();

      //instantiating Rectangle by passing it the itemViewOptions
      var rectangle = new Rectangle (modelHelper);

      //adding newly instantiated rectangle in the collection
      this.collection.add(rectangle);
      console.log(this.collection);
    }
  },

在集合中添加矩形后，CollectionView 将负责渲染它！ :)

如果有任何优化或其他方法，请告诉我！现在我必须处理 css 属性，因为我的矩形不会呈现到位：/

【讨论】：