Question

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

由于我正在计算东西，我使用了itemViewOptions函数，它返回一个包含所有必要数据的对象，它将作为选项传递给我的ItemView（RectangleView）。

在initialize的{{1}}方法中，我调用setCssStyle方法，将css属性应用于视图。

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

ItemView

我读过我需要覆盖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 } }, [...] });方法，根据Marionette Documentation

传递3个参数：buildItemView

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

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

如果我没有很好地解释我的问题，我会事先道歉，但我的大脑感觉有点糊涂

Answer 1

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

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

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

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

放置该代码的理想位置是我的CollectionView中的mouseup事件（想一想，你点击 - ＆gt;拖动 - ＆gt;释放鼠标按钮来绘制一个框）

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

使用Marionette在CompositeView中创建Itemview

1 个答案: