在稍后的上下文中解析模板文字

Question

我有如下用例，我正在填充 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;
};

populate_children(blog_entries_dom, blog_entries, blog_entry_template);

Answer 1

模板文字正是：文字。它们根据它们出现的位置进行评估，就像所有文字一样。它们不是对象，你不能传递它们。

你可以做的是将它们放在一个函数中并传递函数。让函数接受模板需要的东西，return 评估它的结果。

在你的情况下，你只需将 blog_entry_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;
};

用法：

populate_children("some-id", blog_entries, blog_entry_template);

Answer 2

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

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;
    };

在稍后的上下文中解析模板文字

Resolving template literals at a later context

javascript

template-literals