Как вывести многострочный HTML с переменной интерполяцией, используя Javascript? - PullRequest
Новая
       10

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

2 голосов
/ 01 декабря 2010

Я пытаюсь вывести следующее при каждом запуске функции: 

<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, если это поможет.

Ответы [ 3 ]

2 голосов
/ 01 декабря 2010

Вы можете использовать многострочные строки в 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";
1 голос
/ 01 декабря 2010

Самым популярным подходом jQuery в настоящее время является плагин jQuery Template . Теперь вопрос в том, должны ли вы вообще делать такие манипуляции с DOM на стороне клиента? Это решение может принять только ты. Однако, если это то, что вам нужно сделать, плагин шаблонов подойдет. Подробности см. В статье Джона Ресига .

. 
<!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>
0 голосов
/ 01 декабря 2010

Здесь есть (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 содержит ваши значения. В зависимости от того, сколько полей вы вставляете в строку «template», вы можете сделать ее очень настраиваемой. Когда код готов, вставьте его в документ.

...