{"id":937,"date":"2017-03-25T13:51:01","date_gmt":"2017-03-25T13:51:01","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=937"},"modified":"2017-03-25T13:53:11","modified_gmt":"2017-03-25T13:53:11","slug":"javascript-easy-templates","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=937","title":{"rendered":"javascript easy templates"},"content":{"rendered":"<blockquote><p>Goal: build a quick template method<\/p><\/blockquote>\n<p>So we have an item template and some values to replace. Do like this way.<\/p>\n<pre><code>\r\n  \/\/ 1. define the parser\r\n  function template(strings, ...keys) {\r\n    return (function(...values) {\r\n      var dict = values[values.length - 1] || {};\r\n      var result = [strings[0]];\r\n      keys.forEach(function(key, i) {\r\n        var value = Number.isInteger(key) ? values[key] : dict[key];\r\n        result.push(value, strings[i + 1]);\r\n      });\r\n      return result.join('');\r\n    });\r\n  };\r\n\r\n  \/\/ 2. define the template\r\n  var itemTemplate = template`&lt;li>\r\n      &lt;div class=\"direction-r\">\r\n        &lt;div class=\"flag-wrapper\">\r\n          &lt;span class =\"flag\">${0}&lt;\/span>\r\n          &lt;span class =\"time-wrapper\">${1}&lt;\/span>\r\n        &lt;\/div>\r\n        &lt;div class =\"desc\">${2}&lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/li>`;\r\n\r\n  \/\/ 3. use like this\r\n\r\n  console.log(itemTemplate('this is the FLAG', ' - time - ', ' - description - '));\r\n  console.log(itemTemplate('second', ' - time 2 - ', ' - description 2 - '));\r\n\r\n<\/code><\/pre>\n<blockquote><p>see also: <a href=\"http:\/\/blog.silverterra.net\/?p=909\" title=\"javascript multiline strings in the code\" target=\"_blank\">javascript multiline strings in the code<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Goal: build a quick template method So we have an item template and some values to replace. Do like this way. \/\/ 1. define the parser function template(strings, &#8230;keys) { return (function(&#8230;values) { var dict = values[values.length &#8211; 1] || {}; var result = [strings[0]]; keys.forEach(function(key, i) { var value = Number.isInteger(key) ? values[key] : [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"class_list":["post-937","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tricky"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=937"}],"version-history":[{"count":3,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/937\/revisions"}],"predecessor-version":[{"id":940,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/937\/revisions\/940"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}