Hi,
> In my present job we don't have a designer, so us coders are the designer.
> I don't mind but I'd still like to keep the two separated as much as
> possible.
Our Designer gives me (the developer) what he has produced with GoLive and a
text describing, how things should interact. If something is not clear I
simply ask him.
> What are others doing to make sure that even small snippets of HTML aren't
> creeping into their js files?
Idon't write them. I prefer to use a DOM Builder to create new Elements.
> $('#courseHist').append('<div><span class="heading">Course
> Title</span><span class="content">' + crs.title + '</span></div>');
$('#courseHist').append($.dom('div',{},[
['span',{'class':'heading'},['Course Title']],
['span',{'class':'content'},[crs.title]]
]));
Usually that is OK, because our designer uses a lot of CSS and is happy with
code like this most of the time. If that is not acceptable, I use load() for
a hidden part of the page at first use and then clone it as often as I need:
function insertCourseHistory(hist) {
var tmpl = $('#courseHistTemplate');
var tmplc = $('*',tmpl);
if( tmplc.lengt == 0 ) {
tmpl.load('histTemplate.htmlf',{},function() {
insertCourseTitles(hist);
});
} else {
$('#courseHist').append(tmplc).find('.content').each(function(i) {
$(this).html(hist[i].title);
});
}
}
The html fragment file 'histTemplate.htmlf':
<div>
<span class="heading">Course Title</span>
<span class="content"></span>
</div>
If the page is not public I even spare the single load and put the template on
the page directly. Then the JS code is really simple:
$('#courseHist').append('#courseHistTemplate > *').
find('.content').each(function(i) {
$(this).html(hist[i].title);
});
On public pages you might get punished by Google for having hidden content on
your page so I prefer to use external html fragments.
Christof
