Элегантный чистый способ включить HTML в файлы JavaScript?

Ответ 1

Шаблоны. Выберите яд

• EJS
• jQuery templates (nb: разработка прекращена)
• шаблоны underscore
• mustache
• jResig micro templates

Либо встройте их как script, либо загрузите их с помощью ajax в качестве внешних ресурсов.

Я лично использую EJS в качестве внешних файлов шаблонов и просто получаю EJS для их загрузки и вставляю их в контейнер с данными json, привязанными к шаблону.

new EJS({ 
    url: "url/to/view"
}).update('html_container_name', {
    "foobar": "Suprise"
});

И тогда файлы просмотра используют общую логику представления.

// url/to/view
<p> <%=foobar %></p>

Ответ 2

Вы можете включить HTML как обычную разметку в конце страницы, внутри невидимого div. Затем вы можете ссылаться на него с помощью jQuery.

Затем вам необходимо программно установить свои поля переменных (электронная почта, тема, тело)

<div id='container' style='display: none;'>
  <div id='your-dialog-box-contents'>
    ...
    ...
  </div>
</div>

<script type='text/javascript'>
  $("#from").val(from);
  $("#subject").val(subject);
  $("#body").val(body);
  $("#data").html($("#your-dialog-box-contents"));
</script>

Ответ 3

Для многострочных строк (без фреймворков, просто javascript) существует несколько решений. См. Мой ответ на этот СОБСТВЕННЫЙ вопрос. Вы можете комбинировать это с некоторыми простыми шаблонами:

String.prototype.template = String.prototype.template ||
        function (){
            var  args = Array.prototype.slice.call(arguments)
                ,str = this
                ,i=0
                ;
            function replacer(a){
                var aa = parseInt(a.substr(1),10)-1;
                return args[aa];
            }
            return  str.replace(/(\$\d+)/gm,replacer)
};
//basic usage:
'some #1'.template('string'); //=> some string
//your 'html' could look like:
var html =
  [ '<form action="javascript:emailDone();" method="post">',
    ' <div><label for="to">To</label>',
    '       <input id="to" type="text"></div>',
    ' <div><label for="from">From</label>',
    '       <input id="from" type="text" ',
    '         value="$0"></div>',
    ' <div><label for="subject">Subject</label>',
    '      <input id="subject" type="text" disabled="disabled" ',
    '        value="$1"></div>',
    ' <div><label for="body">Body</label>',
    '      <input id="body" type="text" disabled="disabled" ',
    '        value="$2"></div>',
    ' <div><input type="submit" value="Send"><input type="button" ',
    '        value="Cancel" ',
    '        onClick="javascript:$.fancybox.close();"></div>',
    '</form>'
  ] .join('').template(email, subject, body);

Ответ 4

В вашей проблеме есть 2 решения: - Альтернатива синтаксису heredoc в javascript заключается в том, чтобы выйти из новой строки char с помощью \:

var tpl = "hello\
stackoverflow\
World !";

char экранируется так игнорируется, и это не будет происходить в результирующей строке.

Вы также можете создать простой html файл с вашим шаблоном, а в js script вы создадите скрытый iframe и загрузите шаблон crossdomain html. Теперь вы можете получить доступ к объекту документа iframe и возвратить body.innerHTML. В теории! Я еще не тестировал это решение....

Ответ 5

Лично мне нравится создавать DOM-деревья следующим образом:

$('#data').html(
    $('<div/>', {
        id: 'email_window',
        html: $('<h2/>', {
            html: 'Email Share'
        })
    }).after(
        $('<form/>', {
            action: 'javascript:emailDone();',
            method: 'post',
            html: $('<div/>', {
                html: $('<label/>', {
                    for: 'to',
                    html: 'To'
                }).after($('<input/>', {
                    id: 'to',
                    type: 'text'
                }))
            }).after(
                ... etc
            )
        })
    )
);

Ответ 6

Вы правы, JS не имеет heredocs или многострочных строк. Тем не менее, обычный подход к этому заключается в том, чтобы HTML в... HTML, и показать или скрыть его по мере необходимости. Вы уже используете jQuery, так что вы больше всего там:

<div style="display:none;">
    <form method='post' class="email">
         <input id='from' type='text'> <!-- other form fields omitted for brevity -->
    </form>
    <form method='post' class="facebook"></form> <!-- again, omitted for brevity -->
</div>

Затем вы можете заполнить форму и бросить ее в нужное место:

$('#data').html($('form.email').find('input#from').val(email).end().html());

Ответ 7

Cook.js

div([
  button({click:[firstEvent, secondEvent]},
         'You can bind (attach) events on the fly.'),
  p('Here are some popular search engines'),
  ul([
    li([
      a('Google', {href:'http://www.google.com'})
    ]),
    li([
      a('Bing', {href:'http://www.bing.com'})
    ]),
    li([
      a('Yahoo', {href:'http://www.yahoo.com'})
    ])
  ])
]);

как это работает

Objects = Attribute & Events
    -> {href:'facebook.com', src:'static/cat.gif', ng-bind:'blah'}
String  = Text or Html
    -> 'hello world'
Array   = Elements
    -> [a('hello world', {href:'facebook.com'}), img({src:'static/cat.gif'})] 

больше на cook.js!