Блог

Главная - Вопросы по программированию - Литеральная строка со смешанными переменными

Литеральная строка со смешанными переменными

#javascript

#javascript

Вопрос:

Это не работает, и я получаю ошибку 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=trueamp;poster='   filePath   fileImage 'amp;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);

Ответ №1:

Эта строка:

 <param id="flashvars-param" name="flashvars" value="controls=trueamp;poster='   filePath   fileImage 'amp;file='   filePath   fileMP4   '" />

должно быть:

 <param id="flashvars-param" name="flashvars" value="controls=trueamp;poster='   filePath   fileImage   'amp;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=trueamp;poster='   filePath   fileImage   'amp;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>';

Комментарии:

1. Я подумал, что это что-то нелепое. Спасибо!

Ответ №2:

Похоже, вы пытаетесь создать фрагмент HTML с несколькими замененными значениями. Поскольку вы уже используете jQuery, идеальным решением является шаблон jQuery

Шаблон

 <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=trueamp;poster='${imagePath}'amp;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);

Комментарии:

1. Спасибо за информацию! Я никогда не слышал о шаблонах jQuery.

Ответ №3:

Никогда не смешивайте HTML с кодом JavaScript. Вместо этого используйте шаблоны, их доступно множество, и даже очень маленькие и простые.

Примеры: