Question

有人可以告诉我一个提供基本HTML模板的库吗？

即。我需要的只是一个库，它将占位符转换为HTML中的文字值。即，我说有以下标记：

<!DOCTYPE html>
<html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <label>My Label:</label>

        <div>
            <label>Name:</label>
            <input placeholder="Enter name..." />
        </div>
    </body>
</html>

我想要的是在标记中标记一些占位符，理想情况下，在简单化视图中，指向一个javascript变量。

<!DOCTYPE html>
<html>
    <head>
        <title>{{myApp.labels.title}}</title>

        <script>
            (function () {
                window.myApp = {
                    labels: {
                        title: 'My Title',
                        label1: 'My Label',
                        name1: 'Name',
                        placeholder: 'Enter name'
                    }
                };
            }());
        </script>
    </head>
    <body>
        <label>{{myApps.labels.label1}}:</label>

        <div>
            <label>{{myApps.labels.name1}}:</label>
            <input placeholder="{{myApps.labels.placeholder}}..." />
        </div>
    </body>
</html>

我查看了Handlebars.js和Mustache.js这样的库，但是这些：

暗示您想要的标记与模型紧密相关。
使用JavaScript将一段标记绑定到各自的变量

因此，有什么更简单的（如果我写的是有道理的）？非常感谢。

Answer 1

你可以自己动手：

function tmpl (markup, tmplvars, prefix) {
    for(var key in tmplvars) {
        if (tmplvars[key] instanceof Object)
            markup = tmpl(markup, tmplvars[key], prefix ? (prefix + "." + key) : key);
        else
            markup = markup.replace(new RegExp("\{\{" + (prefix? (prefix + "." + key) : key) + "\}\}", "gi"), tmplvars[key]);
    }
    return markup;
}

并像这样使用它：

var MyTemplate = '<label>{{username.label}}<input placeholder="{{username.placeholder}}"/></label>';
var markup = tmpl(MyTemplate, {username:{label: "Username", placeholder: "Enter your username..."}});

jsfiddle

非常简单的Javascript模板

1 个答案: