From 0cab33efe59e12e1cc1a6e3e5c4e21b79c056f4a Mon Sep 17 00:00:00 2001 From: Jeremy Likness Date: Mon, 25 Nov 2019 16:46:59 -0800 Subject: [PATCH] Add data-binding for lists --- index.html | 4 ++-- js/controls.js | 3 +++ js/slide.js | 41 ++++++++++++++++++++++++++++++++++++++++ slides/070-ng-conf2.html | 2 +- slides/data-binding.html | 8 ++++++++ 5 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 slides/data-binding.html diff --git a/index.html b/index.html index 45761e0..e82896c 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ + content="default-src 'self'; script-src 'self' 'unsafe-eval'; child-src 'none'; connect-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; media-src 'self'; object-src 'none'; style-src 'self';"> @@ -16,7 +16,7 @@ - +

DevNexus | Vanilla.js: Modern 1st Party JavaScript

Setting things up ...

 diff --git a/js/controls.js b/js/controls.js index 64a8613..64ff9cb 100644 --- a/js/controls.js +++ b/js/controls.js @@ -85,6 +85,9 @@ export class Controls extends HTMLElement { * Enables/disables buttons and updates position based on index in the deck */ refreshState() { + if (this._controlRef == null) { + return; + } const next = this._deck.hasNext; const prev = this._deck.hasPrevious; this._controlRef.first.disabled = !prev; diff --git a/js/slide.js b/js/slide.js index 1aceb05..7f9f770 100644 --- a/js/slide.js +++ b/js/slide.js @@ -14,6 +14,11 @@ export class Slide { * @type {string} */ this._text = text; + /** + * Context for embedded scripts + * @type {object} + */ + this._context = {}; /** * The HTML DOM hosting the slide contents * @type {HTMLDivElement} @@ -49,6 +54,42 @@ export class Slide { else { this._nextSlideName = null; } + // execute any scripts + const script = this._html.querySelector("script"); + if (script) { + (function (/** @type {string} */src) { + return eval(src) + }).call(this._context, script.innerText); + this.dataBind(); + } + } + + /** + * Scans for data-binding and applies the bindings + */ + dataBind() { + const listBinding = this._html.querySelectorAll("[repeat]"); + listBinding.forEach(elem => { + const parent = elem.parentElement; + const expression = elem.getAttribute("repeat"); + elem.removeAttribute("repeat"); + const template = elem.outerHTML; + parent.removeChild(elem); + this._context[expression].forEach(item => { + let newTemplate = `${template}`; + const matches = newTemplate.match(/\{\{([^\}]*?)\}\}/g); + if (matches) { + matches.forEach(match => { + match = match.replace("{{", "").replace("}}", ""); + const value = (function (/** @type {string} */src) { + return eval(src) + }).call({ item }, match); + newTemplate = newTemplate.replace(`{{${match}}}`, value); + }); + parent.innerHTML += newTemplate; + } + }); + }); } /** diff --git a/slides/070-ng-conf2.html b/slides/070-ng-conf2.html index b440fe9..fcfd829 100644 --- a/slides/070-ng-conf2.html +++ b/slides/070-ng-conf2.html @@ -2,4 +2,4 @@

I'm Not Anti-Angular!

Here's proof from 2014... + title="Inside the inaugural Angular conference ngConf" /> \ No newline at end of file diff --git a/slides/data-binding.html b/slides/data-binding.html new file mode 100644 index 0000000..1f325af --- /dev/null +++ b/slides/data-binding.html @@ -0,0 +1,8 @@ +Data-Binding Example 1 +

Data-Binding Example

+ + \ No newline at end of file