考虑一个HTML代码段,其中包含一系列占位符(包含在单个花括号中)。
<div>
{ user.name }
{ user.username }
{ user.address.line1 }
{ user.address.line2 }
</div>
和一个看起来像这样的JavaScript对象:
var user = {
name: 'Bob Foo',
username: 'bobfoo',
address : {
line1: '10 Foo Street',
line2: 'Footown'
}
};
用等效变量替换占位符的最佳方法是什么?我很欣赏这是一种模板的基本形式,但我不希望第三方依赖车把或类似物。除了占位符本身之外,我也不想向模板添加任何细节。如果有特殊需要与另一个库发生冲突,将占位符分隔符更改为其他内容就可以了。
这是一个来自更大文件的JS片段,我们用它来解析占位符。它工作正常,但我不确定这是否是一个好习惯,它肯定不是特别优雅!不言而喻,我们希望在不使用eval()
的情况下执行此操作,因为数据来源是第三方。
var template = $(self.options.templateId).html();
for (var k in user) {
if (!user.hasOwnProperty(k)) continue;
if(k == 'address'){
for (var k in user.address) {
if (!user.address.hasOwnProperty(k)) continue;
var needle = "{ user.address." + k + " }";
template = template.replace(needle, user.address[k]);
}
}else{
var needle = "{ user." + k + " }";
template = template.replace(needle, user[k]);
}
}
这是jQuery插件的一部分,所以任何jQuery特定代码都可以。
由于
答案 0 :(得分:2)
休息一天,我该怎么办?代码是这样的。
试图从头开始实施模板处理。它应该完全符合您的需求:
除了jquery之外,没有使用库将已编译的模板添加到DOM中。
随意使用它。欢迎Any1使这个代码更好或更小;)
的 plunker 强>
$(document).ready(function () {
var tmpl =
' <div>'+
' { user.name }'+
' { user.username }'+
' { user.address.line1 }'+
' { user.address.line2 }'+
'</div>';
var user = {
name: 'Bob Foo',
username: 'bobfoo',
address : {
line1: '10 Foo Street',
line2: 'Footown'
}
};
function compileTmpl(templateStr, data) {
var tmpl = ''+templateStr;
var tokens = tmpl.match(/\{(.[^{]+)\}/ig);
for(var i=0; i<tokens.length; i++) {
var t = tokens[i].replace(/([{}\s]+)/ig, '');
if(t && t.length > 0) {
var propChain = t.split('.');
var val = data;
for(var p=0; p<propChain.length; p++) {
if(val && val.hasOwnProperty(propChain[p])) {
val = val[propChain[p]];
}
}
if(val.length > 0) {
tmpl = tmpl.replace(new RegExp('{[ ]*'+t+'[ ]*}', 'ig'), val);
}
}
}
return tmpl;
}
var compiledTmpl = compileTmpl(tmpl, {user: user});
$('body').append(compiledTmpl);
});
<强>输出:强>
<div> Bob Foo bobfoo 10 Foo Street Footown></div>
答案 1 :(得分:0)
如果我必须这样做,我使用了AngularJS。
对于HTML的数据绑定,您可以使用AngularJS。
未来: AngularJS使用双括号{{}}, 如果你使用单括号关键,你可以在AngularJS脚本中更改它。
var sampleApp = angular.module('YourApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{');
$interpolateProvider.endSymbol('}');
});
答案 2 :(得分:0)
你应该使用一些Id或类 例如
<div id="box1">
<span class="name">{ user.name }</span>
<span class="username">{ user.username }</span>
<span class="line1">{ user.address.line1 }</span>
<span class="line2">{ user.address.line2 }</span>
</div>
所以你可以轻松地使用jquery访问html,如下所示:
$('#box1 .name').html(user.name);
或
$('#box1 .name').text(user.name);
其中一个应该很好
答案 3 :(得分:0)
您最好使用流行的模板插件:http://skilldrick.co.uk/tmpl/#slide6
而不是使用自定义代码。