How to use JSON Markup to add dynamic sub elements to the shape?

[dsrdh]

Introduction

I have a requirement similar to the example shown in this QAD Application demo.

In that example, the optionMarkup is used to create multiple DOM elements and they are appended to the cell element. The attributes (attrs) of the cell are also applied to this options DOM element.

However, I couldn't find any examples using JSON markup to achieve something similar. How can this be done? Please note that all the options will share some common presentation attributes, which I would like to specify in the cell attrs for simplicity.

JointJs Version: 4.0.4

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[dsrdh]

Found a private method that does this - parseDOMJSON and using the below code to achieve similar behaviour. Not sure, if this will cause any other issue - will update here in that case.

const doc = cellView.parseDOMJSON(cellModel.optionMarkup, cellView.el);
joint.util.merge(cellView.selectors, doc.selectors, (objValue, srcValue) => _.isArray(objValue) ? _.concat(objValue, srcValue) : undefined);
cellView.findNode('options').append(doc.fragment);

[kumilingus]

I recommend you to use one of these 2 approaches:

• Here's an example how to build the element's markup dynamically: https://jsfiddle.net/kumilingus/z6scbp4r/ (without a need for a custom view). Simple

• Here's an example of an element view that implements custom rendering: https://jsfiddle.net/kumilingus/gdks4tc9/6/ (does not use the default JointJS attrs mechanism). Flexible

If for some reason you want to dynamically create markup inside element views, don't use JSON markup. Just create a DOM element using the native API (or Vectorizer). The attrs with class names as selectors will still work.

[dsrdh]

Thanks @kumilingus !