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中提供调用'基类'方法的方法。在此代码段中，它调用基类joint.dia.ElementView上的initialize方法。
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(); });

JointJS基本了解

1 个答案: