Создание 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 (косметичек/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 сгорит все необходимые мероприятия (инициализация , визуализировать & whatnot). Оттуда вы можете манипулировать рисованными элементами SVG или перекрытием (аналогично учебнику) с моим ранее созданным HTML-файлом JointView. Я в основном помещаю свой элемент domView в виде SVView над SVG, который нарисован by joints.

Там вы идете. Исправлено!

Answer 2

Я не эксперт JointJS, но ваша реализация выглядит идеально.

Вы хотите использовать второй вариант:

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({ /* ... */ }); 
    } 
}); 

поскольку Marionette.CollectionView ожидает марионеток вид (. Зр 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 
}