Home/ Questions/Q 8025289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T23:07:10+00:00

I have created a Backbone.js/Require.js application that dynamically loads HTML templates to use as

  • 0

I have created a Backbone.js/Require.js application that dynamically loads HTML templates to use as “pages” in the application. This means my main HTML page looks like so.

<head>
  // Necessary CSS and Javascripts here
</head>
<body>
  <div id="container"></div>
</body>

And then I used underscore templates to render new elements dynamically to the DOM. However, a new feature requires the use of a Raphael.js chart. I created a new element <div id='canvas'></div> and call Raphael('canvas') but since the canvas element wasn’t there on DOM ready, Raphael can’t see the newly created element.

I have attempted to use a jQuery selector in place of the id reference like so Raphael($('#canvas')) but this attaches the canvas to the body element and not my container element.

Any suggestions on how to bind a Raphael canvas to a dynamically created element?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A way to overcome this issue is by creating an empty element in the view and binding everything onto that. I have never worked with Raphael, but I think this could work:

    var someView = Backbone.View.extend({
    el: document.createElement('div'), // This creates a DOM element '<div></div>'

    initialize: function(){
        Raphael(this.el); // Attach Raphael, you could also go with jQuery
    },

    render: function(){
        jQuery('#container').append(this.el); // Add to DOM somehow
    }
})
    • 0