Dynamically add widgets to a dashboard using backbone.js and jquery

Question

I'm coding a Dashboard of a Web-CMS app using Backbone.js and several jQuery plugins. This dashboard should be as intuitive and customizable as possible and highly extendable at once.

Now, what I want to do, is to load a widget's data and it's template by an api via ajax. In fact, that isn't a problem but I wanted to ask you about a best practice to load template data (HTML/javascript/etc...) with javascript via ajax.

I could make multiple ajax calls where I first receive an html snippet with the template and then load it's data in a second request as a JSON string.

// first request
<h6>Some HTML Stuff here</h6>
// second request
{"id": "5", "name": "Example Widget"}

Or I could store the template itself in a JSON string which on the other side would reduce server-load but feels kind of wrong.

// single request
{"id": "5", "name": "Example Widget", "template": "<h6>Some HTML stuff here"</h6>"}

Any suggestions or other methods?

Answer 1

The 2 request method is they way I have personally went when setting this up. The overhead for the separate call was not worth the worry of trying to process the data in the browser. If you would really like to minimize the number of calls, combining JSON responses will probably be the most efficient way.

I would recommend using require.js as it manages most of this for you.

http://backbonetutorials.com/organizing-backbone-using-modules/