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

Question

我在此元素内的addDetail 按钮上显示一个表单。如何将我的数据绑定到此单元格并使用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() 方法将其发送到服务器。