Fix examples not working

Fixes patrick-steele-idem#218
stefanfisk · Sep 27, 2021 · 30e9d7f · 30e9d7f
1 parent 84f28d0
commit 30e9d7f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/examples/lifecycle-events/client.js b/examples/lifecycle-events/client.js
@@ -10,7 +10,7 @@ var todos = [
 ];
 
 function updateDOM() {
-    var todosHtml = todosTemplate.renderSync({ todos: todos });
+    var todosHtml = todosTemplate.renderSync({ todos: todos }).toString();
     morphdom(document.getElementById('todos'), todosHtml, {
         onNodeAdded: function(el) {
             if (el.className === 'todo') {
@@ -52,4 +52,4 @@ window.handleRemoveTodoClick = function(el) {
     updateDOM();
 };
 
-updateDOM();
+updateDOM();
diff --git a/examples/lifecycle-events/todos.marko b/examples/lifecycle-events/todos.marko
@@ -2,7 +2,7 @@
   <if (data.todos.length)>
     <ul>
         <for|todo| of=data.todos>
-            <li class=["todo", todo.visible && 'todo-visible'] id='todo${todo.id}'>
+            <li class=["todo", todo.visible && 'todo-visible'] id=`todo${todo.id}`>
                 <span class="todo-remove" onclick="window.handleRemoveTodoClick(this)" data-id=todo.id></span>
                 <span class="title">${todo.title}</span>
             </li>

diff --git a/examples/simple/client.js b/examples/simple/client.js
@@ -9,12 +9,12 @@ window.updateDOM = function() {
 
     if (state === 'before') {
         state = 'after';
-        updatedHTML = contentAfterTemplate.renderSync();
+        updatedHTML = contentAfterTemplate.renderSync().toString();
     } else {
         state = 'before';
-        updatedHTML = contentBeforeTemplate.renderSync();
+        updatedHTML = contentBeforeTemplate.renderSync().toString();
     }
 
     morphdom(document.getElementById('container'), updatedHTML);
 
-};
+};
diff --git a/examples/simple/content-after.marko b/examples/simple/content-after.marko
@@ -1,4 +1,5 @@
-div#container
-    h2 - This is the <emphasis>after</emphasis> DOM
-    input type="text" value="bar"
-    div.animated.after - This DIV uses CSS transitions
+<div id="container">
+    <h2>This is the <em>after</em> DOM</h2>
+    <input type="text" value="bar">
+    <div class="animated after">This DIV uses CSS transitions</div>
+</div>
diff --git a/examples/simple/content-before.marko b/examples/simple/content-before.marko
@@ -1,4 +1,5 @@
-div#container
-    h2 - This is the <emphasis>before</emphasis> DOM
-    input type="text" value="foo"
-    div.animated.before - This DIV uses CSS transitions
+<div id="container">
+    <h2>This is the <em>before</em> DOM</h2>
+    <input type="text" value="foo">
+    <div class="animated before">This DIV uses CSS transitions</div>
+</div>