混合変数を使用したリテラル文字列

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