1

我正在尝试构建一个应用程序，其中有一个CompositeView处理鼠标事件的应用程序，允许您在其中绘制矩形（CompositeView 是矩形的集合）。我正在计算/存储CompositeView.

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

在我调用 setCssStyle 方法的initialize方法中ItemView，该方法将 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根据木偶文档

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

另外，目前我的 RectangleView 没有模型。我应该创建一个，我怎样才能将我的传递给我的itemViewOptions，最终传递给模型？CompositeViewItemView

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

4

1 回答 1

1

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

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

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

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

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

[...]
  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 属性，因为我的矩形不会呈现到位：/

于 2013-11-15T11:44:27.570 回答