简单的客户端模板直接在HTML中

时间:2014-07-24 13:23:44

标签: javascript html templating-engine

我正在寻找一个简单的小型模板引擎,其用法类似于:

<html>
<head>
    <script src="templating.js"></script>
    <script>
        var data = {
            person: {
                name: "John",
                age: 28
            }
        };
        templating(data);
    </script>
    <title>Site</title>
</head>
<body>

My name is {{person.name}} and I'm {{person.age}} years old.

</body>
</html>

应该导致页面呈现的内容:

  

我叫约翰,我28岁。

我已经查看了这里找到的每一个模板引擎:http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more而我找不到那样的工具。

所以问题是:我在这里遗漏了什么,或者出于某种原因,这种模板不是一种好的做法吗?

1 个答案:

答案 0 :(得分:1)

查看https://angularjs.org/

它使用与您提供的语法非常相似的语法

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

并且有一些关于模板的额外功能,你可能会发现它们很有用。