Javascript 在以后的上下文中解析模板文本

我有一个用例，如下所示，我正在填充

innerHTML

，如下所示。现在的问题是我想在forloop的上下文中解析模板文本。有什么线索吗

var blog_entries_dom = 'blog_entries';
var blog_entries = [
    {
        "title": "Hello World",
        "id": 2,
        "body": "<p>Hello World</p>"
    },
    {
        "title": "World Hello",
        "id": 3,
        "body": "<p>World Hello</p>"
    }
];

var blog_entry_template = `<div class="post-preview">
                        <a href="post.html">
                            <h2 class="post-title">
                                ${item.title}
                            </h2>
                            <h3 class="post-subtitle">
                                ${item.body}
                            </h3>
                        </a>
                        <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
                    </div>
                    <hr>`;


var populate_children = function (element_id, objects_list, template) {

    var element = document.getElementById(element_id);

    var html = '';

    for (var i = 0; i < list.length; i++) {
        var item = list[i]
        html += template;
    }

    element.innerHTML = html;
};

var blog_entries_dom='blog_entries'；
var blog_条目=[
{
“标题”：“你好，世界”，
“id”：2，
“正文”：“你好，世界”
},
{
“标题”：“世界你好”，
“id”：3，
“body”：“世界你好
”
}
];
var博客\u条目\u模板=`
发布人#创建于
`；
var populate\u children=函数（元素id、对象列表、模板）{
var element=document.getElementById（元素id）；
var html=''；
对于（变量i=0；i

填充子项（博客条目、博客条目、博客条目模板）

---

模板文本就是：文本。与所有文字一样，它们会根据出现的位置进行计算。它们不是物体，你不能传递它们

您可以做的是将它们放在函数中并传递函数。让函数接受模板所需的内容，并返回评估结果

在您的情况下，只需将

blog\u entry\u template

更改为箭头函数，并调用它：

var blog_entries_dom = 'blog_entries';
var blog_entries = [
    {
        "title": "Hello World",
        "id": 2,
        "body": "<p>Hello World</p>"
    },
    {
        "title": "World Hello",
        "id": 3,
        "body": "<p>World Hello</p>"
    }
];

var blog_entry_template = item => `<div class="post-preview">
    <a href="post.html">
        <h2 class="post-title">
            ${item.title}
        </h2>
        <h3 class="post-subtitle">
            ${item.body}
        </h3>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
</div>
<hr>`;


var populate_children = function (element_id, objects_list, template) {

    var element = document.getElementById(element_id);

    var html = '';

    for (var i = 0; i < list.length; i++) {
        html += template(list[i]);
    }

    element.innerHTML = html;
};

---

我有其他的解决方案，使用原型可能是个好主意

String.prototype.replaceTemp = function(replaceObj) {
   return this.replace(/{\$(\w{1,20})}/g, function(matchStr, agr) {
     if (replaceObj[agr] instanceof Object || replaceObj[agr] instanceof Function) {
       var _tempPool = (window.TEMP_POOL = window.TEMP_POOL || []);
       var _length = _tempPool.length;
       _tempPool[_length] = replaceObj[agr];

       if (replaceObj[agr] instanceof Function)
         return "TEMP_POOL[" + _length + "](this);"
       else
         return "TEMP_POOL[" + _length + "]";

     } else {
       return replaceObj[agr] || "";
     }

   });
 };


    var blog_entries_dom = 'blog_entries';
    var blog_entries = [
        {
            "title": "Hello World",
            "id": 2,
            "body": "<p>Hello World</p>"
        },
        {
            "title": "World Hello",
            "id": 3,
            "body": "<p>World Hello</p>"
        }
    ];

    var blog_entry_template = `<div class="post-preview">
                            <a href="post.html">
                                <h2 class="post-title">
                                    {$title}
                                </h2>
                                <h3 class="post-subtitle">
                                    {$body}
                                </h3>
                            </a>
                            <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
                        </div>
                        <hr>`;


    var populate_children = function (element_id, objects_list, template) {

        var element = document.getElementById(element_id);

        var html = '';

        for (var i = 0; i < list.length; i++) {
            html += template.replaceTemp(list[i]);
        }

        element.innerHTML = html;
    };

String.prototype.replaceTemp=函数（replaceObj）{
返回这个.replace（/{\$（\w{1,20}）}/g，函数（matchStr，agr）{
if（replaceObj[agr]instanceof Object | | replaceObj[agr]instanceof Function）{
变量_tempool=（window.TEMP_POOL=window.TEMP_POOL | |[]）；
var _length=_tempool.length；
_tempPool[_length]=replaceObj[agr]；
if（函数的replaceObj[agr]实例）
返回“TEMP_POOL[”+_length+“]（this）；”
其他的
返回“临时池[“+”长度+“]”；
}否则{
返回replaceObj[agr]| | |“”；
}
});
};
var blog_entries_dom='blog_entries'；
var blog_条目=[
{
“标题”：“你好，世界”，
“id”：2，
“正文”：“你好，世界”
},
{
“标题”：“世界你好”，
“id”：3，
“body”：“世界你好
”
}
];
var blog_条目_模板=`
发布人#创建于
`；
var populate\u children=函数（元素id、对象列表、模板）{
var element=document.getElementById（元素id）；
var html=''；
对于（变量i=0；i

实现这一目标的推荐方法是什么？我手头有一个模板&对象列表，我需要缝合它们。（Doh！编辑错误，如果您在其中任何位置看到

var formatItem=…

，请点击刷新。）那么如何将模板保持在此方法之外？因为这个方法是泛型的，并且会接受模板文本作为参数。@itsneo:你的问题不是这个。答案是：模板文本就是：文本。它们不是物体，你不能传递它们。您可以做的是将它们放在函数中并传递函数。你让函数接受模板需要的东西，并返回对它求值的结果。这是我想要的方法签名

var populate\u children=function（element\u id，objects\u list，template）{}

看起来我需要重新创建自己的模板parser@itsneo：我更新了答案以反映更新后的问题，这更清楚。（当我这么做的时候，你接受了答案，这表明你找到了它的应用方式。：-）不，扩展内置原型被认为不是一个好主意。全局

TEMP_POOL

肯定是一个糟糕的例子。内置原型将易于使用，全局

TEMP_POOL

用于绑定事件，否则您必须先创建DOM元素，然后再创建绑定事件，但它只是简单地替换模板中的变量。

String.prototype.replaceTemp = function(replaceObj) {
   return this.replace(/{\$(\w{1,20})}/g, function(matchStr, agr) {
     if (replaceObj[agr] instanceof Object || replaceObj[agr] instanceof Function) {
       var _tempPool = (window.TEMP_POOL = window.TEMP_POOL || []);
       var _length = _tempPool.length;
       _tempPool[_length] = replaceObj[agr];

       if (replaceObj[agr] instanceof Function)
         return "TEMP_POOL[" + _length + "](this);"
       else
         return "TEMP_POOL[" + _length + "]";

     } else {
       return replaceObj[agr] || "";
     }

   });
 };


    var blog_entries_dom = 'blog_entries';
    var blog_entries = [
        {
            "title": "Hello World",
            "id": 2,
            "body": "<p>Hello World</p>"
        },
        {
            "title": "World Hello",
            "id": 3,
            "body": "<p>World Hello</p>"
        }
    ];

    var blog_entry_template = `<div class="post-preview">
                            <a href="post.html">
                                <h2 class="post-title">
                                    {$title}
                                </h2>
                                <h3 class="post-subtitle">
                                    {$body}
                                </h3>
                            </a>
                            <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
                        </div>
                        <hr>`;


    var populate_children = function (element_id, objects_list, template) {

        var element = document.getElementById(element_id);

        var html = '';

        for (var i = 0; i < list.length; i++) {
            html += template.replaceTemp(list[i]);
        }

        element.innerHTML = html;
    };