javascript - JointJS 基本了解

Question

我在这里关注本教程:

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

我有两个小问题:

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

2)- 此自定义 View 在此代码中如何工作？

// 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 中调用“基类”方法的方法。在此代码段中，它调用基类 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('改变', function() { self.updateBox(); });