Using custom templates in "HTML in JointJS elements"

2,790 views
Skip to first unread message

Isaac López Marín

unread,
May 29, 2014, 6:27:06 AM5/29/14
to joi...@googlegroups.com
Hello,

I'm working using HTML in Jointjs elements.
As the regarding tutorial point out, the way to provide the template is by defining:

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(''),

I've tried to add my custom template like in a backbone view:

joint.shapes.html.ElementView = joint.dia.ElementView.extend({
template: _.template( $('#nodeTemplate').html()),


<body>
...
...

<script id="nodeTemplate" type="text/template">
<div class="html-element">
    <label id="summary_state_label"></label> <br id="summary_br"/>
<label id="minimum_state_label"></label>
        <select hidden><option>green</option><option>yellow</option><option>red</option></select>
        <div class="img_type_details" id="type_image_div">
        <img id="icon_img" src="Images/_<%=icon%>.png" >
        <img id="status_img" src="Images/circle_<%=status%>.png" alt="<%=status%>">
        <img id="summary_img" src="Images/_<%=detail_action%>_details.png" >
        </div>
        <input id="menu_button" type="image" src="Images/_square_expand.png" >
</div>
</script>
</body>

, but I get the error "TypeError: text.replace is not a function"
Also, I've tried several ways to load the template in the initialize function, but with the same error in the console.

Is there any way to use a custom template defined as <script id="nodeTemplate" type="text/template"> or placed in another file?

Thank you so much in advance.
Isaac.

Isaac López Marín

unread,
Jun 2, 2014, 4:13:11 AM6/2/14
to joi...@googlegroups.com
Hello again,

Please, has anyone some approach to this question?
At least, I would like to know if it is possible or not...
I've been trying to solve this matter but without success.
Thank you so much in advance.

Isaac.

Roman Bruckner

unread,
Jun 2, 2014, 7:07:26 AM6/2/14
to joi...@googlegroups.com
Hi Isaac,

I guess you are using html.ElementView from the tutorial page, so the attribute 'template' in the elementView supposed to be a string not a function.

template: _.template( $('#nodeTemplate').html()) needs to be changed to template: $('#nodeTemplate').html()

As your templates using variables you also need to pass some data to the _.template() function inside elementView.initialize() before evaluation.

Hope that helps.

Roman






--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Isaac López Marín

unread,
Jun 2, 2014, 11:45:26 AM6/2/14
to joi...@googlegroups.com
Hi Roman,

Thank you so much for your reply.
Yes, you are right. I'm using html.Element from the tutorial page.

I'll try your suggestion. It should work :)
I guessed about the passing data to the _.template() function inside ...initialize().
I'll send a new reply with the working code once I get the solution.

Once more, thanks a lot.

Cheers,
Isaac. 

JavaDev Guy

unread,
May 13, 2015, 6:33:18 PM5/13/15
to joi...@googlegroups.com
Hi Isaac,

did you ever get this working, I'm new to JointJS and have just had the same issue, I'm also attempting to load my template from an external file and I'm not sure how that should work either!

Thanks for any help,

Nigel

Isaac López Marín

unread,
May 15, 2015, 9:11:03 AM5/15/15
to joi...@googlegroups.com
Hi Nigel,

sorry but I couldn't get this work.

I am so sorry but I don't have any useful help regarding this issue.

Regards,
Isaac.

--

---
You received this message because you are subscribed to a topic in the Google Groups "JointJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jointjs/QCeZ3ucyTNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jointjs+u...@googlegroups.com.

David Durman

unread,
May 15, 2015, 10:38:28 AM5/15/15
to joi...@googlegroups.com
Hi all,

I would like to note that JointJS is primarily an SVG library. I highly recommend using SVG in your shapes only. It makes things much more scalable and flexible. While it is possible to use HTML as shown in one of the tutorials, it's not recommended as it might give you other issues later on. For example, if using the Rappid framework's export features (to SVG/PNG, ...), the HTML content won't be exported. Also the paper zoom, translate and other features (http://jointjs.com/demos/paper)  probably won't work correctly unless you put some effort in making your HTML adaptable to that. You might also have other problems with ui.SelectionView (http://jointjs.com/rappid/docs/ui/selectionView) and others. We don't put too much effort in making JointJS shapes work with HTML content. SVG is pretty rich technology making it possible to display an arbitrary 2D content. The shapes can get quite complex. After all, our charts (http://jointjs.com/demos/charts) are just another JointJS shapes. The only reason on using HTML can be when you want to show some user inputs (like forms, select boxes, buttons, ....). For this, I recommend using the ui.Halo plugin (or a similar implementation of your own in case you don't have Rappid) - http://jointjs.com/rappid/docs/ui/halo. What I'm trying to say is that these forms can be displayed when user clicks on the shape or hovers over it. In other words, these forms don't necessarily have to be displayed all the time for all shapes but only at the moment the user wants to edit them.

Best,
David
ᐧ

---

David Durman
client IO

JavaDev Guy

unread,
May 15, 2015, 7:46:45 PM5/15/15
to joi...@googlegroups.com
Hi David,

thanks for replying on this and pointing out these issues, part of the design I am hoping to achieve is to use something like the bootstrap accordion to allow users to expand the view of an element so they can see and manipulate information in context.  I had a quick look at the halo view but I'm not sure if it offers the ability to contain this sort of control?  I got the impression it is more geared to providing the user with contextual actions rather than contextual information and editing.  I'm very new to JointJS so please let me know if I misunderstood the function of the halo.

Best regards,

Nigel

Aakarshika Priydarshi

unread,
Mar 16, 2017, 10:04:02 AM3/16/17
to JointJS
Hi Isaac,

I know this thread is old, but this is all I could find on the issue I am having.
Can you tell me what did you end up using for having html form like tools inside an element in Jointjs.

Thanks.
Reply all
Reply to author
Forward
0 new messages