[英]assign html snippet in javascript
There are times that I need to assign a html snippet to a javascript var, such as, 有时候,我需要将html代码段分配给javascript var,例如,
var homePage =
'<div>' +
'<div class="header"><h1>Page Slider</h1></div>' +
'<div class="scroller">' +
'<ul class="list">' +
'<li><a href="#page1"><strong>Build Bot</strong></a></li>' +
'<li><a href="#page2"><strong>Medi Bot</strong></a></li>' +
'<li><a href="#page3"><strong>Ripple Bot</strong></a></li>' +
'</ul>' +
'</div>' +
'</div>';
This can work good, but it makes editing a bit hard. 这可以很好地工作,但是会使编辑变得有些困难。 May I know any framework can do this elegantly?
我可以知道任何框架都可以优雅地做到这一点吗?
Use handlebars.js this is how is works: 使用handlebars.js,这是如何工作的:
Send a JSON object back to javascript. 将JSON对象发送回javascript。 I usually use something like this:
echo json_encode(array('object_name'=>$obj));
我通常使用这样的东西:
echo json_encode(array('object_name'=>$obj));
<div id="#my_template_container"></div>
usually in your AJAX success function: 通常在您的AJAX成功函数中:
var my_obj= JSON.parse(data);
var tmpl = $("#my_layout").html();
var theTemplate = Handlebars.compile(tmpl);
$('#my_template_container').html(theTemplate(my_obj));
echo json_encode(array('object_name'=>$obj))
statement from PHP. echo json_encode(array('object_name'=>$obj))
语句中分配的变量。 {{Property_Name}}
. {{Property_Name}}
访问对象的{{Property_Name}}
。 {{Propert_Name.ID}}
{{Propert_Name.ID}}
<script id="my_layout" type="text/x-handlebars-template">
{{#object_name}}
'<div>' +
'<div class="header"><h1>Page Slider</h1></div>' +
'<div class="scroller">' +
'<ul class="list">' +
'<li><a href="#page1"><strong>{{property1}}</strong></a></li>' +
'<li><a href="#page2"><strong>{{property2}}</strong></a></li>' +
'<li><a href="#page3"><strong>{{property3}}</strong></a></li>' +
'</ul>' +
'</div>' +
'</div>';
{{/object_name}}
</script>
I created a very light plugin, just for the times, when you just want to use some html
inside js, and do not require a lot of options provided my templating frameworks and thus want to avoid heavy js. 当您只想在js内使用一些
html
,并且我的模板框架不提供很多选项时,我就创建了一个非常轻巧的插件,仅此一次。
Coffee script 咖啡脚本
(($) ->
utCache = {}
$.fn.ut = (tmplID, obj) ->
_tmpl = (str) ->
fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');"
new Function("o", fn)
_getData = (ele) ->
$(ele).html utCache[tmplID](obj)
@each ->
ele = this
utCache[tmplID] = _tmpl($(tmplID).html()) unless utCache[tmplID]
_getData ele
) jQuery
Javascript Java脚本
(function($) {
var utCache;
utCache = {};
return $.fn.ut = function(tmplID, obj) {
var _getData, _tmpl;
_tmpl = function(str) {
var fn;
fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');";
return new Function("o", fn);
};
_getData = function(ele) {
return $(ele).html(utCache[tmplID](obj));
};
return this.each(function() {
var ele;
ele = this;
if (!utCache[tmplID]) {
utCache[tmplID] = _tmpl($(tmplID).html());
}
return _getData(ele);
});
};
})(jQuery);
You can use it simply like, 您可以像这样简单地使用它,
$('#my-div').ut("#my-template", { name: 'jashwant'});
when we have following HTML: 当我们有以下HTML时:
<div id='my-div'></div>
<script type='javascript' id='my-template'>
<p><%=o.name %> welcomes you !</p>
</script>
Do it with Javascript's document
methods. 使用Javascript的
document
方法来实现。
var topdiv = document.createElement('div');
var headerDiv = document.createElement('header');
var header = document.createElement('h1');
header.innerHTML = 'Page Slider';
headerDiv.appendChild(header);
// etc....
Or use templating. 或使用模板。
Just use backslashes to escape line breaks. 只需使用反斜杠即可避免换行。
Eg: 例如:
var homePage =
'<div> \
<div class="header"><h1>Page Slider</h1></div> \
<div class="scroller"> \
<ul class="list"> \
<li><a href="#page1"><strong>Build Bot</strong></a></li> \
<li><a href="#page2"><strong>Medi Bot</strong></a></li> \
<li><a href="#page3"><strong>Ripple Bot</strong></a></li> \
</ul> \
</div> \
</div>';
Use \\n\\
instead of \\
if you want to include the line breaks in the string. 如果要在字符串中包含换行符,请使用
\\n\\
代替\\
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.