附加文本不会显示

Question

从文本区域添加文本，该文本区域将附加到tspan内的svg文本。我可以在控制台中看到附加的文本，但它不会显示在输出中。我错过了什么？

还有另一个问题，即每个字符都重复并添加到新行中。如何捕获整个文本onChange事件。我还是联合新手。需要帮助才能达到更高水平。感谢

以下是我的尝试：

window.onload = function ()
{
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 1500,
        height: 700,
        model: graph
    });

    // Create a custom element.
    joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            size: {width: 200, height: 110},
            attrs: {
                '.': {magnet: true},
                rect: {
                    stroke: 'none', 'fill-opacity': 0, width: 300, height: 210
                }
            }
        }, joint.shapes.basic.Generic.prototype.defaults)
    }));

    // 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">',
            '<span class="lbl" value=""></span>',
            '<textarea class="txt" type="text" value=""></textarea>',
            '</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').on('mousedown click', function (evt) {
                evt.stopPropagation();
            });
            this.$ruler = $('<tspan>');
            $('text').append(this.$ruler);
            // This is an example of reacting on the input change and storing the input data in the cell model.
            this.$box.find('textarea').on('input', _.bind(function (evt) {
                var val = $(evt.target).val();
                this.model.set('textarea', val);
                this.$ruler.append(val).html;
            }, this));
            this.$box.find('textarea').on('click', _.bind(function () {
                this.$box.find('textarea').css({opacity: 1});
            }, this));
            this.$box.find('textarea').on('blur', _.bind(function () {
                this.$box.find('textarea').css({opacity: 0});
                this.model.on('remove', this.removeBox, this);
            }, this));
            // 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.updateBox();
            this.listenTo(this.model, 'process:ports', this.update);
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);
        },
        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('text').append('<tspan x=200>').text(this.model.get('textarea'));
            this.$box.find('textarea').text('');
            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.$ruler.remove();
            this.$box.remove();
            this.$box.find('textarea').remove();
        }
    });

    // Create JointJS elements and add them to the graph as usual.
    // -----------------------------------------------------------

    var el1 = new joint.shapes.basic.Rect({
        position: {x: 200, y: 250},
        size: {width: 200, height: 100},
        attrs: {
            '.label': {text: 'Model', 'ref-x': .4, 'ref-y': .2},
            rect: {fill: '#2ECC71'}
        }
    });
    graph.addCells([el1]);
    paper.on('cell:pointerdblclick', function (cellView, evt, x, y) {
        var el3 = new joint.shapes.html.Element({
            position: {x: x - 65, y: y - 50},
            textarea: ''
        });
        graph.addCells([el3]);
    });
};