製作JointJs＆Backbone/Marionette與收藏品（內部的HTML項目）

Question

讓我知道如果你能以某種方式幫助我，我有點掙扎着想我的頭。

開始與一些木偶應用邏輯：

app.js

//basic setup 
this.Graph = new joint.dia.Graph; 
this.Paper = new joint.dia.Paper({ width: 640, height: 480, model: this.Graph }); 

// [...] lots of code 

//adding elements 
app.Elements.add(element); 

到目前爲止好。現在是棘手的部分。我想收藏。

JointCollectionView.js

module.exports = Marionette.CollectionView.extend({ 
    tagName: 'div', 
    className: 'row', 
    childView: JointView, 

    addChild: function(child, ChildView, index){ 
     //does that make sense? 
     app.Graph.addCell(child); 

     //should i add it to collection? 
     if (child.shouldBeShown()) { 
      return Marionette.CollectionView.prototype.addChild.call(this, child, ChildView, index); 
     } 
    }, 

    getChildView: function(item) { 
     return app.Graph.getCell(item); 
    } 

    //[...] 
}) 

現在更加棘手。我如何處理聯合視圖以使其與集合一起工作並顯示html元素？

JointView.js

module.exports = joint.dia.ElementView.extend({ /* ?!?!?! */ }); 

//OR ? 

module.exports = Marionette.ItemView.extend({ 
    jointElementView: null, //this will be like above somewhere else... 

    initialize: function(options){ 
     jointElementView = new JointElementView({ /* ... */ }); 
    } 
}) 

Answer 1

隨着@seebiscuit我看了很多深入jointjs的幫助和縮小，應該怎樣解決這個問題（你似乎不感興趣的點雖然如此，我會回答我自己）

以下文件進行編輯：！

app.js（改變，重要的）

//this step is necessary to create these element before the paper is created. 
//Make jointjs GLOBAL!!!!!! 
joint.shapes.html = {}; 
joint.shapes.html.Element = require('views/Element'); //this dude im gonna use to create the elements 
joint.shapes.html.ElementView = require('views/ElementView'); //this badboy will fire when i create those elements. MAGIC! 

//basic setup 
this.Graph = new joint.dia.Graph; 
this.Paper = new joint.dia.Paper({ width: 640, height: 480, model:  this.Graph }); 

// [...] lots of code 

//adding elements 
app.Elements.add(element); 

JointCollectionView.js（beauti-/simplyfied）

module.exports = Marionette.CollectionView.extend({ 
    tagName: 'div', 
    className: 'row', 
    childView: JointView, 

    onRender: function(){ 
     // jointjs' paper is added here long after jointjs custom element init. 
     this.el.appendChild(app.Paper.el); 
    }, 

    onDestroy: function(){ 
     // removal of the paper is done here 
     this.el.removeChild(app.Paper.el); 
    }, 

    buildChildView: function(child, JointView, childViewOptions){ 
     // add model, jointjs' paper and graph into JointView's options 
     var options = _.extend({model: child}, childViewOptions); 
      options = _.extend({paper: app.Paper, graph: app.Graph}, options); 

     return new JointView(options); 
    }  

    //[...] 
}) 

JointView.js（魔術在這裏！）

module.exports = Marionette.ItemView.extend({ 
    tagName: 'div', 
    className: 'html-element', 
    template: "#agentTmpl", 

    // store here just in case 
    cell: null, 

    // [...] 

    initialize: function() { 
     // initialize joinjs element-shape here 
     Marionette.bindEntityEvents(this, this.model, this.modelEvents); 

     if(this.cell == null){ 
     //notice `el: this.el` This will actually pass the option el to ElementView. Surprised? 
     //Yeah me too. From there i can do with the dom-element whatever i want 
     this.cell = new joint.shapes.html.Element({ el: this.el, position: { x: 80, y: 80 }, size: { width: 250 } }); 
     } 
    }, 

    onRender: function(){ 
      // after rendering add cell to graph 
      this.options.graph.addCell(this.cell); 
    }, 

    onDestroy: function(){ 
      // after removal remove cell from graph 
      this.cell.remove(); 
    } 
}); 

Element.js ElementView.js

爲了簡單或多或少喜歡這裏：http://www.jointjs.com/tutorial/html-elements 總結實際發生的事情是：每當一個新的元素創建ElementView將解僱所有必要的事件（初始化，渲染&什麼）。從那裏你可以使用我以前創建的JointView的html操作繪製的svg元素或重疊（類似於教程）。我基本上把我的JointView DOM元素放在由jointjs繪製的SVG上。

你去那裏。 固定！

Answer 2

我不是JointJS專家，但您的實現看起來很完美。

你想使用的第二個選項：由於Marionette.CollectionView期望一個木偶視圖

JointView.js

module.exports = Marionette.ItemView.extend({ 
    template: _.template(""); 
    jointElementView: null, //this will be like above somewhere else... 

    initialize: function(options){ 
     this.jointElementView = new JointElementView({ /* ... */ }); 
    } 
}); 

（SP A Marionette.ItemView或後代[LayoutView/CompositeView中]） 。

我會增加JointView.js是從this.jointElementView注入結果到JointView.js HTML的方法。所以，一個屬性添加到它，比如：

onRender: function() { 
    this.$el.append(this.jointElementView.el); // Where this.jointElementView.el is the JointJS view html 
}