Adding custom template rendering

slimjs · Dec 8, 2016 · 6aac79a · 6aac79a
1 parent a1e53f6
commit 6aac79a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 24 deletions.
diff --git 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
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Kanban Demo - SlimJS</title>
+    <link href="https://fonts.googleapis.com/css?family=Catamaran:200|Catamaran:800|Ubuntu|Ubuntu:800" rel="stylesheet" async>
 
     <script src="../../SlimElement.js"></script>
     <script src="KanbanModel.js"></script>
@@ -19,6 +20,7 @@
     <style type="text/css">
 
         body, html {
+            font-family: "Ubuntu", "Helvetica", Sans-serif;
             width: 100%;
             height: 100%;
             margin: 0;

diff --git a/example/Kanban/KanbanModel.js b/example/Kanban/KanbanModel.js
@@ -10,6 +10,10 @@
             this.tasks = []
         }
 
+        getIdForNewTask() {
+            return this.tasks.length + 1;
+        }
+
         getTasks(column) {
             return this.tasks.filter( task => {
                 return task.column === column
@@ -19,6 +23,7 @@
         addTask(title = 'New Task', description = '') {
             let newTask = { title, description}
             newTask.column = 'Todo'
+            newTask.id = this.getIdForNewTask()
             this.tasks.push(newTask)
         }
 

diff --git a/example/Kanban/kanban-app.html b/example/Kanban/kanban-app.html
@@ -24,5 +24,6 @@
         align-items: flex-start;
         justify-content: space-between;
         width: 100%;
+        height: 100%;
     }
 </style>
diff --git a/example/Kanban/kanban-column.html b/example/Kanban/kanban-column.html
@@ -9,10 +9,6 @@
             return `<span bind>[[data.name]]</span><kanban-item slim-repeat="myTasks"></kanban-item>`
         }
 
-        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;
     }
 </style>
diff --git 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 `
 <div>
@@ -15,16 +13,10 @@
 </div>`
         }
 
-
-
-
-
-
     })
 
 
 
-
 })()
 
 
@@ -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;
     }
 </style>