{"_id":"5608e5d28aedf50d0004cf95","category":{"_id":"5605f309a4574a0d00811366","version":"55a6e72f8cc73e0d00096638","__v":10,"pages":["5608e5448aedf50d0004cf93","5608e54fa7b2590d0089eae5","5608e58331beb60d001b655a","5608e59ea7b2590d0089eae8","5608e5c031beb60d001b655c","5608e5d28aedf50d0004cf95","5608e5f7a7cc2f0d00d9754a","5608e61131beb60d001b655e","5608efbdc5cff70d007d00ee","5669f132c3de130d00441858"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:21:13.347Z","from_sync":false,"order":4,"slug":"development-quick-start","title":"Development Quick Start"},"parentDoc":null,"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":4,"project":"55a6e72e8cc73e0d00096635","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T07:01:38.897Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"[block:html]\n{\n  \"html\": \"Stencil allows you to render dynamic components on the fly. For example, note this default code in <NOBR><span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/components/products/quick-view.html</span></nobr> (note also this <em>file</em> name, which Handlebars will reference later in this example):<br><br>\\n\\n<pre>\\n&lt;div class=\\\"modal-body quickView\\\"&gt;\\n  &lt;a href=\\\"#\\\" class=\\\"modal-close\\\" aria-label=\\\"Close\\\"><span aria-hidden=\\\"true\\\">&amp;#215;&lt;/span&gt;&lt;/a&gt;\\n  {{&gt; components/products/product-view}}\\n&lt;/div&gt;\\n</pre>\\n\\n\\nTo render a different template, you would instead reference that template’s file name. For example, assume that you want to substitute a custom template that you’ve named: <NOBR><span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/components/products/quicker-view.html.</span></nobr><br><br>\\n\\nThis next code block is from the Stencil default theme’s <span class=\\\"inline-code\\\"><theme-name>/assets/js/theme/global/quick-view.js</span> file. Note the statements <strike>deleted (strikeout)</strike> and <b>inserted (bold)</b> to swap in the new file name:<br><br>\\n\\n<pre>\\nlet $modal = $('#modal'),\\n  $modalContent = $('.modal-content', $modal),\\n  $modalOverlay = $('.loadingOverlay', $modal),\\n  modalModifierClasses = 'modal--large';\\n\\n$('body').on('click', '.quickview', (event) => {\\n  let productId = $(event.currentTarget).data('product-id');\\n\\n  event.preventDefault();\\n\\n  // clear the modal\\n  $modalContent.html('');\\n  $modalOverlay.show();\\n\\n  // open modal\\n  $modal.foundation('reveal', 'open');\\n\\n<strike>  utils.api.product.getById(productId, {template: 'products/quick-view'}, function done(err, response) {\\n      $modalOverlay.hide();\\n      $modalContent.html(response);</strike>\\n      \\n\\n  <b>utils.api.product.getById(productId, {template: 'products/quicker-view'}, function done(err, response) {\\n      $modalOverlay.hide();\\n      $modalContent.html(response);</b>\\n\\n      return new ProductDetails($modalContent, context);\\n  });\\n});</pre>\"\n}\n[/block]","excerpt":"The stencil-utils Library","slug":"rendering-html-with-ajax","type":"basic","title":"Rendering HTML with Ajax"}

Rendering HTML with Ajax

The stencil-utils Library

[block:html] { "html": "Stencil allows you to render dynamic components on the fly. For example, note this default code in <NOBR><span class=\"inline-code\">&lt;theme-name&gt;/templates/components/products/quick-view.html</span></nobr> (note also this <em>file</em> name, which Handlebars will reference later in this example):<br><br>\n\n<pre>\n&lt;div class=\"modal-body quickView\"&gt;\n &lt;a href=\"#\" class=\"modal-close\" aria-label=\"Close\"><span aria-hidden=\"true\">&amp;#215;&lt;/span&gt;&lt;/a&gt;\n {{&gt; components/products/product-view}}\n&lt;/div&gt;\n</pre>\n\n\nTo render a different template, you would instead reference that template’s file name. For example, assume that you want to substitute a custom template that you’ve named: <NOBR><span class=\"inline-code\">&lt;theme-name&gt;/templates/components/products/quicker-view.html.</span></nobr><br><br>\n\nThis next code block is from the Stencil default theme’s <span class=\"inline-code\"><theme-name>/assets/js/theme/global/quick-view.js</span> file. Note the statements <strike>deleted (strikeout)</strike> and <b>inserted (bold)</b> to swap in the new file name:<br><br>\n\n<pre>\nlet $modal = $('#modal'),\n $modalContent = $('.modal-content', $modal),\n $modalOverlay = $('.loadingOverlay', $modal),\n modalModifierClasses = 'modal--large';\n\n$('body').on('click', '.quickview', (event) => {\n let productId = $(event.currentTarget).data('product-id');\n\n event.preventDefault();\n\n // clear the modal\n $modalContent.html('');\n $modalOverlay.show();\n\n // open modal\n $modal.foundation('reveal', 'open');\n\n<strike> utils.api.product.getById(productId, {template: 'products/quick-view'}, function done(err, response) {\n $modalOverlay.hide();\n $modalContent.html(response);</strike>\n \n\n <b>utils.api.product.getById(productId, {template: 'products/quicker-view'}, function done(err, response) {\n $modalOverlay.hide();\n $modalContent.html(response);</b>\n\n return new ProductDetails($modalContent, context);\n });\n});</pre>" } [/block]