JointJS 基本理解

Question

我在这里学习本教程：

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

我有两个小问题：

1)- 这是什么“joint.util.deepSupplement”？它的目的是什么？

2)- 这个自定义视图在这段代码中是如何工作的？

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

我还想知道初始化函数中的前两行是什么，它说 _.bindAll 和下一行joint.dia.ElementView....？

Answer 1

• joint.util.deepSupplement 的行为与 lodash _.defaultsDeep (https://lodash.com/docs#defaultsDeep) 完全相同
• joint.dia.ElementView.prototype.initialize.apply(this, arguments); 这是在 js 中提供调用“基类”方法的方法。在这个 sn-p 中，它调用基类 joint.dia.ElementView 上的初始化方法。
• bindAll：这是处理调用上下文 ('this') 的 lodash 语法糖。下面所有的语法都是等价的

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(); });