替换 HTML 片段中的占位符

Question

考虑这样一个 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 特定代码都可以。

谢谢

Answer 1

如果我必须这样做，我会使用 AngularJS。

对于将数据绑定到 HTML，您可以使用AngularJS。

对于未来： AngularJS 使用双括号 {{ }}，如果您使用单括号至关重要，您可以在 AngularJS 脚本中更改它。

var sampleApp = angular.module('YourApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{');
    $interpolateProvider.endSymbol('}');
});