HTML templates - don't write the same html twice (couchdb)

Question

I am making a small website, and I need a way to use the same html several times. Right now I have one html file with whats common for all the pages, and then I'm using AJAX to fetch .html files containing parts of HTML.

Examples:

Main html:

<html>
    <head>...</head>
    <body>
        <div class="main-content-wrapper">
            <!-- AJAX puts html here -->
        </div>
    </body>
</html>

JavaScript: (excerpt)

// Fire ajax request
$.ajax({
    url: pagename,
}).done(function (data) {

    // Overwrites old html with new html
    $('.main-content').html(data);

    if (callback)
        callback();   
});

But this gives me a problem when I'm trying to bind events to buttons, where to include JavaScript/CSS for the html pages etc. I don't really need a fullweight framework, I just need to fetch some html so I won't have to write it twice. Anyone knows how?

EDIT: I get the files served from couchdb, so I don't know if I can use a serverside language like PHP.

Kabir Sarin · Accepted Answer · 2013-03-05T17:25:54.137

5

You could use a server side language (like php and use include)
You could use a JS templating system (like underscore.js or mustache.js)
Or if you want to keep doing it the current way, utilize jQuery's .on() to bind events to DOM elements inserted in the future

edited Mar 05 '13 at 17:25

answered Mar 05 '13 at 17:18

Kabir Sarin

18,092
10
50
41

I get the files served from couchdb, so I don't know if I can use a serverside language like PHP. – ptf Mar 05 '13 at 17:24

score 2 · Answer 2 · answered Mar 06 '13 at 14:07

If your primary goal is to keep "DRY" (Don't Repeat Yourself) and avoid writing the same HTML multiple times, then there are simpler ways (than AJAX calls) to accomplish that.

You can actually do the complete templating in CouchDB using _show requests which us a Mustache.js (or similar) templating language and run the whole thing through the CouchDB server. You can use a _show request with any document. The show function receives the document as it's first parameter. You then load the templating engine (Mustache.js is likely perfect for what you're building), and run it through Mustache.to_html() returning the output.

Here's a bit more on _show functions: http://guide.couchdb.org/draft/show.html

There is also a good set of blog posts on using jQuery Mobile + CouchDB + Mustache.js. The 3rd entry in the series talks about templating specifically: http://custardbelly.com/blog/2010/12/28/jquery-mobile-couchdb-part-3-templates-and-mustache-js/

You shouldn't need everything he describes there (like jQuery Mobile), but the templating related portions seem to fit what you are building, and at least have clear _show function examples.

Additionally, there's nothing that prevents using PHP with CouchDB. It's just more (and generally unnecessary) overhead. You would be running an HTTP server + PHP in front of another HTTP server (the one in CouchDB). Regardless, it's completely possible, and there is value in that approach if you're doing things like image manipulation or sending emails, and don't want to build them as reactive events to the _changes feed (which is "deeper" into the greatness of CouchDB than you'll need at this point).

If you do go the PHP in front of CouchDB route, I'd recommend checking out Sag: http://saggingcouch.com/ It's the cleanest PHP library for CouchDB that I've found.

Lastly, you might also checkout Static+ a project by Jason Smith of IrisCouch.com: https://github.com/iriscouch/static-plus

It does templating (using Handlebars.js--which is very similar to Mustache.js), but does it on your dev machine and publishes only the static content to CouchDB. You get the templated, DRY-ness, but with the performance of serving something pre-compiled.

Hope something in there is useful. :)

Isn't _show functions made to display a single document in the database? Does that include a .html attachment in the design document? — ptf, Mar 07 '13 at 13:57
It is meant for documents in the database, yes. It can be used with content from your design docs, but not an attachment from either place (afaik). You can, however, store your HTML directly in the JSON design doc under "templates" (or similar). I do that in BlueInk: http://is.gd/blueink — BigBlueHat, Mar 07 '13 at 19:45
Yeah, that works, but it seems kinda wrong. I mean; that's not, as far as I understand, how _show functions are meant to be used, but it might be the best way to do it. Thanks for the answer, lots of good stuff in there, and I've used a lot of it. — ptf, Mar 08 '13 at 08:45
Nothing "wrong" about it. :) Use _show however you'd like, and put whatever you'd like in the JSON. "Time to Relax." — BigBlueHat, Mar 08 '13 at 21:59

score 1 · Answer 3 · answered Mar 05 '13 at 17:20

1

I would suggest using a server side technology for this task - I use PHP for including my header/footer, CSS links, and JS includes. It's a simple one liner:

<?php include '<yourfile>.html'; ?>

It works very well.

If you must use JS, you'll have to bind events after they're imported into the DOM, although CSS should apply itself automatically.

answered Mar 05 '13 at 17:20

Kenneth

416
4
13

I get the files served from couchdb, so I don't know if I can use a serverside language like PHP. – ptf Mar 05 '13 at 17:25
You are probably right, although in my opinion couchdb ought to support cross domain PHP requests. If they do not you may be able to try [this](http://stackoverflow.com/questions/2752783/including-php-file-from-another-server-with-php). Otherwise I'd use Kabir's number 3. – Kenneth Mar 05 '13 at 17:32

HTML templates - don't write the same html twice (couchdb)

3 Answers3