Elegante, saubere Möglichkeit, HTML in JavaScript-Dateien einzubinden?

Ich bin den Aufbau einer kleinen app mit ein paar modales dialog-Fenster. Die windows erfordern ein klein wenig HTML. Ich habe hart codiert das Fenster HTML-javascript-Bibliothek, aber bin nicht begeistert mit dieser Lösung. Gibt es eine elegantere Möglichkeit das zu tun? Es scheint, dass JavaScript nicht über multi-line strings/heredoc-syntax.

var html = "<div id='email_window'><h2>Email Share</h2><div>";
html = html + "<form action='javascript:emailDone();' method='post'>";
html = html + "<div><label for='to'>To</label><input id='to' type='text'></div>";
html = html + "<div><label for='from'>From</label><input id='from' type='text' value='" + email + "'></div>";
html = html + "<div><label for='subject'>Subject</label><input id='subject' type='text' disabled='disabled' value='" + subject + "'></div>";
html = html + "<div><label for='body'>Body</label><input id='body' type='text' disabled='disabled' value='" + body + "'></div>";
html = html + "<div><input type='submit' value='Send'><input type='button' value='Cancel' onClick='javascript:$.fancybox.close();'></div>";
html = html + "</form></div>";

$("#data").html(html);

Eingefügt, um zu verdeutlichen das original-Nachricht-

Ist eine Lösung nicht verwenden Ajax/XHR zu ziehen in der template-Datei, da der javascript-Bibliothek wird auf einer anderen domain, dass die html-Datei ist im
Es ist ein wenig wie bei ShareThis. Die Bibliothek aufgenommen werden, auf eine Reihe von verschiedenen Websites und an das onClick-Ereignis von jedem Anker-tag innerhalb divs mit Attribut sharetool="true".

Beispiel:

http://www.bar.com - index.html
<html>
...
<script type="text/javascript" src="http://www.foo.com/sharetool.js"></script>
...
<body>
<div sharetool="true">
</div>
...
</html>

InformationsquelleAutor der Frage Andrew Hopper | 2011-05-31

  1. 15

    Vorlagen. Wählen Sie Ihr Gift

    Entweder Sie als inline-Skriptblöcke oder laden Sie Sie mithilfe von ajax als externe Ressourcen.

    Ich persönlich benutze EJS als externe template-Dateien und bekommen nur EJS, Sie zu laden und injizieren Sie Sie in einen Behälter mit json-Daten an das template.

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

    Und dann Dateien anzeigen, verwenden Sie die generische view-Logik.

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

    InformationsquelleAutor der Antwort Raynos

  2. 21

    Können Sie die HTML-als regelmäßige markup am Ende der Seite, innen eine unsichtbare div. Dann sind Sie in der Lage, zu verweisen, mit jQuery.

    Müssen Sie dann programmgesteuert setzen Sie Ihre Variablen Felder (E-Mail, subject, body)

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

    InformationsquelleAutor der Antwort Michael Berkowski

  3. 8

    Für mehrzeilige strings (ohne Rahmen, nur javascript) gibt es mehrere Lösungen. Siehe meine Antwort auf diese Frage ALSO. Könnte man kombinieren, dass mit einigen einfachen templating:

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

    InformationsquelleAutor der Antwort KooiInc

  4. 5

    Gibt es 2 Lösungen tto deinem problem:
    - Eine alternative für die heredoc-Syntax in javascript ist, um zu entkommen die newline char mit \ :

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

    Den char entkam so ignoriert, und es wird nicht nehmen Platz in der resultierenden Zeichenfolge.

    Können Sie auch erstellen Sie eine einfache html-Datei mit Ihrer Vorlage und in Ihrem js-Skript erstellen Sie einen versteckten iframe und laden Sie die crossdomain html-Vorlage. Sie können nun Zugriff auf das document-Objekt des iframe und retreive body.innerHTML. In der Theorie! Ich Habe nicht getestet, diese Lösung noch....

    InformationsquelleAutor der Antwort Dev in Gfx

  5. 3

    Persönlich mag ich den Aufbau von DOM-Bäumen wie folgt:

    $('#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
            )
        })
    )
);

    InformationsquelleAutor der Antwort Darin Dimitrov

  6. 1

    Hast du Recht, JS nicht heredocs oder multi-line-strings. Das heißt, die übliche Vorgehensweise, um dies ist die HTML - ...HTML, und zeigen Sie oder verstecken Sie Sie gegebenenfalls. Bist du schon mit jQuery, also bist du auf dem besten Weg dorthin:

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

    Dann können Sie füllen das Formular aus und werfen es in die richtige Stelle:

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

    InformationsquelleAutor der Antwort Dan Davies Brackett

  7. 0

    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'})
    ])
  ])
]);

    wie es funktioniert

    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'})]

    mehr auf cook.js!

    InformationsquelleAutor der Antwort Raj Nathani

Schreibe einen Kommentar