How to output multi-line HTML with variable interpolation using Javascript?
I'm trying to output the following each time a function is run:
<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["poster_location", {"url": "clip_location","autoPlay":false,"autoBuffering":true}]}' />
<img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." />
</object>
and I'd like to interpolate javascript va开发者_如何学Pythonriables within certain parts of the code (to change the video/poster etc).
I realise this can be done by targeting each part that needs to be changed using document.getElementById and changing it that way, but, for various reasons, I need to remove and re-build the whole element each time the function is run.
So is there a good way to output html using javascript in a fashion similar to php's echo?
I'm also using jQuery, if that helps.
You can use multiline strings in JavaScript like so:
var str = "Blah blah blah \
note the backslash that escapes the end of line";
Alternatively you can simply close the string and reopen it on the next line:
var str = "Blah blah blah "
+"and this way you don't get 'Empty Text Node' all over your DOM";
The hotest jQuery approach currently is the jQuery Template plugin. Now the question is, should you be doing this kind of DOM manipulation on the client side at all? That is a decision only you can make. However if it is what you need to do, the Template Plugin is handy. For the particulars see John Resig's writeup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script id='summaryTmpl' type="text/x-jquery-tmpl">
<li><h1>${Name}</h1>
<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["${PosterLocation}", {"url": "${Location}","autoPlay":false,"autoBuffering":true}]}' />
<img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." />
</object>
</script>
<script type="text/javascript">
(function($){
var movies = [ { 'Name':'die hard', 'Location':'http://someurl.com/vid.mpg', 'PosterLocation':'http://whereismymovieposter.net' }, { 'Name':'long kiss goodnight', 'Location':'http://whereisit.com'} ];
$(function(){
$("#summaryTmpl").tmpl(movies).appendTo("#moviesList");
});
})(jQuery);
</script>
</head>
<body>
<ul id="moviesList"></ul>
</body>
</html>
There's a (v)sprintf jQuery plugin here: http://plugins.jquery.com/project/printf
It gives you sprintf() like functionality. You'd set up a string, like this:
code = '<object id="%s" width="%d" height="%d" type="application/x-shockwave-flash" data="%s">'
//etc - yours is a bit long.
Then, to generate your unique version...
custom = $.sprintf(code, myId, myWidth, myHeight, myDataURL);
Now custom has your values inserted into it. Depending on how many fields you insert into the "template" string, you can make it very customizable. When the code is done, insert it into your document.
加载中,请稍侯......
精彩评论