Как вывести многострочный HTML с переменной интерполяцией с помощью Javascript?

Я пытаюсь вывести следующий каждый раз, когда функция выполняется:Как вывести многострочный HTML с переменной интерполяцией с помощью Javascript?

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

, и я хотел бы, чтобы интерполировать JavaScript переменных в некоторых частях коды (изменить видео/постер и т.д.).

Я понимаю, что это можно сделать, ориентируясь на каждую часть, которую нужно изменить, используя document.getElementById и меняя ее таким образом, но по разным причинам мне нужно удалить и перестроить весь элемент при каждом запуске функции ,

Итак, есть хороший способ вывода html с использованием javascript в моду, подобной эху php?

Я также использую jQuery, если это помогает.

источник

2010-12-01 Dewgong

В настоящее время самым горячим подходом к jQuery является jQuery Template plugin. Теперь вопрос в том, должны ли вы делать такие манипуляции с DOM на стороне клиента вообще? Это решение, которое вы можете сделать. Однако, если это то, что вам нужно сделать, плагин шаблона удобен. Подробности см. 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>

источник

2010-12-01 19:41:49 huntar

Спасибо, проверили. Хорошо работает для моего дела! – Dewgong 2010-12-01 20:02:52

Вы можете использовать многострочные строки в JavaScript следующим образом:

var str = "Blah blah blah \ 
    note the backslash that escapes the end of line";

В качестве альтернативы вы можете просто закрыть строку и открыть его на следующей строке:

var str = "Blah blah blah " 
    +"and this way you don't get 'Empty Text Node' all over your DOM";

источник

2010-12-01 19:17:27

Там в (v) Sprintf JQuery плагин здесь: http://plugins.jquery.com/project/printf

Это дает вам функциональность sprintf(). Вы бы создать строку, как это:

code = '<object id="%s" width="%d" height="%d" type="application/x-shockwave-flash" data="%s">' 
//etc - yours is a bit long.

Затем, чтобы сгенерировать уникальный вариант ...

custom = $.sprintf(code, myId, myWidth, myHeight, myDataURL);

Теперь custom имеет свои значения в него вставляется. В зависимости от того, сколько полей вы вставляете в строку «шаблон», вы можете сделать ее очень настраиваемой. Когда код будет выполнен, вставьте его в свой документ.

источник

2010-12-01 19:30:24

Это выглядит идеально, но мне интересно, насколько медленнее он сравнивается с решением Колинка? – Dewgong 2010-12-01 19:39:05

Как вывести многострочный HTML с переменной интерполяцией с помощью Javascript?

ответ

Смежные вопросы