![](/img/trans.png)
[英]Is there a elegant way to include javascript file in custom directive javascript file?
[英]Elegant clean way to include HTML in JavaScript files?
我正在构建一个带有几个模态对话窗口的小应用程序。 窗口需要一点点HTML。 我已经在javascript库中对窗口HTML进行了硬编码,但对此解决方案并不满意。 有没有更优雅的方式来做到这一点? 似乎JavaScript没有多行字符串/ heredoc语法。
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);
添加以澄清原始消息 -
任何解决方案都不能使用Ajax / XHR来提取模板文件,因为javascript库将位于不同的域中,它包含在html文件中,它有点像ShareThis。 该库将包含在许多不同的站点上,并附加到div中任何锚标记的onClick事件,其属性为sharetool =“true”。
例如:
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>
您可以将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>
对于多行字符串(没有框架,只是javascript),有几种解决方案。 请参阅我对此SO问题的回答 。 你可以将它与一些简单的模板结合起来:
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);
有两种解决方案可以解决您的问题: - javascript中heredoc语法的替代方法是使用\\
来转义换行符:
var tpl = "hello\
stackoverflow\
World !";
char被转义为被忽略,并且它不会在结果字符串中发生。
您还可以使用模板创建一个普通的html文件,并在js脚本中创建一个隐藏的iframe并加载crossdomain html模板。 您现在可以访问iframe的文档对象并检索body.innerHTML
。 理论上! 我还没有测试过这个解决方案....
就个人而言,我喜欢像这样构建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
)
})
)
);
你是对的,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());
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'})]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.