JointJS Grundverständnis

Question

Ich verfolge dieses Tutorial hier:

http://jointjs.com/tutorial/html-elements

Ich habe zwei kleine Fragen:

1) - Was ist das "joint.util.deepSupplement"? was ist seine Aufgabe ?

2) - Wie funktioniert diese benutzerdefinierte Ansicht hier in diesem Code?

// Create a custom view for that element that displays an HTML div above it. 
// ------------------------------------------------------------------------- 
joint.shapes.html.ElementView = joint.dia.ElementView.extend({ 

template: [ 
    '<div class="html-element">', 
    '<button class="delete">x</button>', 
    '<label></label>', 
    '<span></span>', '<br/>', 
    '<select><option>--</option><option>one</option><option>two</option></select>', 
    '<input type="text" value="I\'m HTML input" />', 
    '</div>' 
].join(''), 

initialize: function() { 
    _.bindAll(this, 'updateBox'); 
    joint.dia.ElementView.prototype.initialize.apply(this, arguments); 

    this.$box = $(_.template(this.template)()); 
    // Prevent paper from handling pointerdown. 
    this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); }); 
    // This is an example of reacting on the input change and storing the input data in the cell model. 
    this.$box.find('input').on('change', _.bind(function(evt) { 
     this.model.set('input', $(evt.target).val()); 
    }, this)); 
    this.$box.find('select').on('change', _.bind(function(evt) { 
     this.model.set('select', $(evt.target).val()); 
    }, this)); 
    this.$box.find('select').val(this.model.get('select')); 
    this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model)); 
    // Update the box position whenever the underlying model changes. 
    this.model.on('change', this.updateBox, this); 
    // Remove the box when the model gets removed from the graph. 
    this.model.on('remove', this.removeBox, this); 

    this.updateBox(); 
}, 
render: function() { 
    joint.dia.ElementView.prototype.render.apply(this, arguments); 
    this.paper.$el.prepend(this.$box); 
    this.updateBox(); 
    return this; 
}, 
updateBox: function() { 
    // Set the position and dimension of the box so that it covers the JointJS element. 
    var bbox = this.model.getBBox(); 
    // Example of updating the HTML with a data stored in the cell model. 
    this.$box.find('label').text(this.model.get('label')); 
    this.$box.find('span').text(this.model.get('select')); 
    this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' }); 
}, 
removeBox: function(evt) { 
    this.$box.remove(); 
} 
}); 

Auch frage ich mich, was sind die ersten beiden Zeilen in der Initialisierungsfunktion tun, wo es heißt _.bindAll und in der nächsten Zeile joint.dia.ElementView ....?

Answer 1

• joint.util.deepSupplement verhält sich exakt das gleiche wie lodash _.defaultsDeep (https://lodash.com/docs#defaultsDeep)
• joint.dia.ElementView.prototype.initialize.apply(this, arguments); Dies ist die Art und Weise, wie 'Basisklasse' -Methode in js zuzuführen nennen. In diesem Snippet wird die Initialize-Methode für die Basisklasse joint.dia.ElementView aufgerufen.
• bindAll: Dies ist lodash Syntax Zucker für den Umgang mit Aufrufkontext ('this'). Alle Syntax unten sind äquivalent

1. _.bindAll(this, 'updateBox'); this.model.on('change', this.updateBox);

2. this.model.on('change', _.bind(this.updateBox, this));

3. this.model.on('change', this.updateBox, this);

4. var self = this; this.model.on('change', function() { self.updateBox(); });