From 6aac79ad50d7cfa7a2697f97e26595d24b330afd Mon Sep 17 00:00:00 2001 From: eavichay Date: Thu, 8 Dec 2016 16:56:23 +0200 Subject: [PATCH] Adding custom template rendering --- SlimElement.js | 28 ++++++++++++++++++---------- example/Kanban/KanbanDemo.html | 2 ++ example/Kanban/KanbanModel.js | 5 +++++ example/Kanban/kanban-app.html | 1 + example/Kanban/kanban-column.html | 6 +----- example/Kanban/kanban-item.html | 15 ++++++--------- 6 files changed, 33 insertions(+), 24 deletions(-) diff --git a/SlimElement.js b/SlimElement.js index d069747..fa0bd82 100644 --- a/SlimElement.js +++ b/SlimElement.js @@ -187,7 +187,16 @@ onBeforeCreated() {} onCreated() {} beforeRender() {} - render() {} + render(template) { + this.isForcedRender = true; + let newTemplate = template; + if (this.template !== newTemplate) { + this.__bindings = {} + this.__bindingTree = document.createElement('slim-component') + this._bindingCycle(newTemplate) + this._renderCycle() + } + } afterRender() {} onAdded() {} update(root = false) { @@ -222,19 +231,18 @@ this._renderCycle() } - _bindingCycle() { - this._captureBindings() - this._applyBindings() + _bindingCycle(forcedTemplate) { + this._captureBindings(forcedTemplate) + this._applyBindings(forcedTemplate) } _renderCycle(skipTree = false) { - this.beforeRender() + if (!this.isForcedRender) this.beforeRender() if (!skipTree) this.appendChild(this.__bindingTree) - - this.render() this._applyTextBindings() - this.afterRender() + if (!this.isForcedRender) this.afterRender() + this.isForcedRender = false; } _applyTextBindings() { @@ -315,8 +323,8 @@ * private */ - _captureBindings() { - let $tpl = this.template; + _captureBindings(forcedTemplate) { + let $tpl = forcedTemplate || this.template; if (!$tpl) { while (this.children.length) { this.__bindingTree.appendChild( this.children[0] ) diff --git a/example/Kanban/KanbanDemo.html b/example/Kanban/KanbanDemo.html index a73a098..4c238ba 100644 --- a/example/Kanban/KanbanDemo.html +++ b/example/Kanban/KanbanDemo.html @@ -3,6 +3,7 @@ Kanban Demo - SlimJS + @@ -19,6 +20,7 @@ \ No newline at end of file diff --git a/example/Kanban/kanban-column.html b/example/Kanban/kanban-column.html index a814fe1..b5740b0 100644 --- a/example/Kanban/kanban-column.html +++ b/example/Kanban/kanban-column.html @@ -9,10 +9,6 @@ return `[[data.name]]` } - onAdded() { - console.log(this.myTasks) - } - get myTasks() { return this.model.getTasks(this.data.name) } @@ -35,6 +31,6 @@ padding: 1em; background: antiquewhite; align-items: center; - justify-content: center; + justify-content: flex-start; } \ No newline at end of file diff --git a/example/Kanban/kanban-item.html b/example/Kanban/kanban-item.html index c19c3c5..f56a4bb 100644 --- a/example/Kanban/kanban-item.html +++ b/example/Kanban/kanban-item.html @@ -5,8 +5,6 @@ Slim('kanban-item', class extends SlimBaseElement { - - get template() { return `
@@ -15,16 +13,10 @@
` } - - - - - }) - })() @@ -41,14 +33,19 @@ justify-content: center; } + kanban-item:last-child { + margin-bottom: 0; + } + kanban-item div { width: 100%; } kanban-item .title { + font-family: "Catamaran", Sans-serif; + font-weight: normal; display: block; font-size: 1.3em; width: 100%; - text-align: center; } \ No newline at end of file