带有混合变量的字符串

Question

这不起作用，我得到一个JavaScript错误，指出我缺少一个;。有没有更好的方法，我应该混合变量与HTML？

var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\ 
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\ 
    <source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\ 
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\ 
    <source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\ 
    <!-- Flash fallback for non-HTML5 browsers without JavaScript -->\ 
    <object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\ 
     <param name="movie" value="build/flashmediaelement.swf" />\ 
     <param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\ 
     <!-- Image as a last resort -->\ 
     <img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\ 
    </object>\ 
    </video>'; 

我终于做了这样的事情。

$("#video-wrap").empty().append(video_html);

Answer 1

这条线：

<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\ 

个

需求是：

<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\ 

你缺少一个+

整个例子：

var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\ 
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\ 
    <source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\ 
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\ 
    <source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\ 
    <!-- Flash fallback for non-HTML5 browsers without JavaScript -->\ 
    <object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\ 
     <param name="movie" value="build/flashmediaelement.swf" />\ 
     <param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\ 
     <!-- Image as a last resort -->\ 
     <img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\ 
    </object>\ 
    </video>'; 

Answer 2

永远不要用JavaScript代码混合HTML。相反，使用模板，有很多可用的，甚至非常小和简单的。

例子：

• jQuery tmpl
• jQote2
• EJS
• ...

Answer 3

它看起来像你想创建几个替代值的HTML代码段。既然你已经使用jQuery的理想解决方案是一个jQuery模板

• http://api.jquery.com/category/plugins/templates/

模板

<script id="theTemplate" type="text/x-jquery-tmpl"> 
    <video id="video-tag" width="640" height="480" poster="${imagePath}" controls="controls" preload="none"> 
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
    <source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" /> 
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\ 
    <source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" /> 
    <!-- Flash fallback for non-HTML5 browsers without JavaScript --> 
    <object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf"> 
     <param name="movie" value="build/flashmediaelement.swf" /> 
     <param id="flashvars-param" name="flashvars" value="controls=true&poster='${imagePath}'&file='${mp4Path}'" /> 
     <!-- Image as a last resort -->\ 
     <img id="fallback-image" src="${imagePath}" width="640" height="480" title="No video playback capabilities" /> 
    </object> 
    </video> 
</script> 

中的JavaScript

var args = { 
    imagePath = filePath + fileImage, 
    mp4Path = filePath + fileMP4 
}; 
var theHtml = $('#theTemplate').tmpl(args);