javascript - 包含 HTML 按钮 onclick 显示表单的 JointJS 元素

Question

我在此元素内的 addDetail 按钮上显示一个表单。如何将我的数据绑定(bind)到此单元格并使用 toJSon() 方法将其发送到服务器？

// 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/>',
        '<input type="text" name="name"  placeholder="name"/>',
        '<button class="addDetail">+</button>',
        '</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 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) {
            alert($(evt.target).val());
            this.model.set('input', $(evt.target).val());
        }, this));


        this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        this.$box.find('.addDetail').on('click', _.bind(function (evt) {
             addActionDetail();


        })
        );


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

}

Answer 1

为了在元素上保存一些数据，您必须按照以下步骤操作:

1. 向形状模型添加一些 elementData 属性。
2. 每次用户单击元素内的 addDetail 时，您都必须拥有元素 ID，从中提取 elementData，然后呈现表单(您可以通过在论文中添加自定义事件监听器来实现这一点)
3. 当点击提交表单时，添加一些自定义触发事件。
4. 监听图表上触发的事件，并尝试通过 ModelId 查找特定单元格并更新它。

这是基本思想示例:

1.您的形状模型:

joint.shapes.myShapes = joint.shapes.myShapes || {};

joint.shapes.myShapes.Element = joint.shapes.basic.Generic.extend({
    //basically the defaults function doesn't needed, because the set function adds that automatically.
    defaults: _.defaultsDeep({
        elementData: null,
    }, joint.shapes.basic.Generic.prototype.defaults),
    getElementData: function () {
        return this.get("elementData");
    },
    setElementData: function (elementData) {
        this.set("elementData", elementData);
    },
});

2.在你的论文初始化中，添加你的自定义事件监听器函数，请注意，您必须记住 ModelId:

paper.on('addDetail:click', function (cell) {
    var elementData = cell.model.getElementData();
    elementData.ModelId = cell.model.id;

    formRender(elementData);
});

3.在您的提交和元素模型中更新的对象上触发一些自定义事件:

function formSubmit() {
    graph.trigger('custom:update', newElementData);
}

4.向图表添加一些自定义事件监听器，通过 ModelId 添加调用 setElementData:

graph.on('custom:update', function (elementData) {
    var cell = graph.getCell(elementData.ModelId);
    cell.setElementData(elementData);
}, this);

现在您可以使用 toJSon() 方法将其发送到服务器。