帶有混合變量的字符串

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);