From a73e1adf533787db42e486c66832795d3ef4ce05 Mon Sep 17 00:00:00 2001
From: avim <avim@wix.com>
Date: Sun, 16 Nov 2014 19:51:59 +0200
Subject: [PATCH] playground version 0.0003 todo sample

---
 playground/main.browser.js | 6 ++++--
 playground/main.js         | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/playground/main.browser.js b/playground/main.browser.js
index ce7a2d1..2cce3b0 100644
--- a/playground/main.browser.js
+++ b/playground/main.browser.js
@@ -47483,6 +47483,8 @@ function generateRenderFunc(renderFunc) {
     }
 }
 var z = {getInitialState: function() {return {name:"reactTemplates"}}};
+var templateHTML =  '<div>\n   Have {_.filter(this.state.todos, {done:true}).length} todos done, \n   and {_.filter(this.state.todos, {done:false}).length} not done\n  <br/>\n   <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n      <button onClick="()=>this.setState({todos:_.reject(this.state.todos, todo)})">Remove</button>\n      <input type="checkbox" checked="{todo.done}" onChange="()=>var td = _.cloneDeep(this.state.todos); td[todoIndex].done = !td[todoIndex].done, this.setState({todos:td})"/>\n      <span style="{todo.done ? {\'text-decoration\':\'line-through\'} : {} }">{todo.value}</span>\n   </div>\n   <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n        <button onClick="(e)=>e.preventDefault(); this.add()" >Add</button><br/>\n   <button onClick="(e)=>e.preventDefault(); this.setState({todos: _.filter(this.state.todos, {done:false})})">Clear done</button>\n</div>';
+var templateProps = '{\nmixins: [React.addons.LinkedStateMixin],\ngetInitialState: function () {\n return {edited: "", todos: [], counter: 0};\n},\nadd: function () {\n this.setState({todos: this.state.todos.concat({value: this.state.edited, done: false,key:this.state.counter}), edited: "", counter: this.state.counter+1})\n}\n}';
 
 var Playground = React.createClass({
 
@@ -47510,8 +47512,8 @@ var Playground = React.createClass({
 
     getInitialState: function () {
         var currentState = {
-            templateHTML: '<div>\n hello {this.state.name}\n</div>',
-            templateProps: '{getInitialState: function () {return {name:"reactTemplates"}}}'
+            templateHTML:templateHTML,
+            templateProps: templateProps
         };
         this.updateSample(currentState);
         return currentState;
diff --git a/playground/main.js b/playground/main.js
index 73d7dc8..4a73107 100644
--- a/playground/main.js
+++ b/playground/main.js
@@ -44,6 +44,8 @@ function generateRenderFunc(renderFunc) {
     }
 }
 var z = {getInitialState: function() {return {name:"reactTemplates"}}};
+var templateHTML =  '<div>\n   Have {_.filter(this.state.todos, {done:true}).length} todos done, \n   and {_.filter(this.state.todos, {done:false}).length} not done\n  <br/>\n   <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n      <button onClick="()=>this.setState({todos:_.reject(this.state.todos, todo)})">Remove</button>\n      <input type="checkbox" checked="{todo.done}" onChange="()=>var td = _.cloneDeep(this.state.todos); td[todoIndex].done = !td[todoIndex].done, this.setState({todos:td})"/>\n      <span style="{todo.done ? {\'text-decoration\':\'line-through\'} : {} }">{todo.value}</span>\n   </div>\n   <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n        <button onClick="(e)=>e.preventDefault(); this.add()" >Add</button><br/>\n   <button onClick="(e)=>e.preventDefault(); this.setState({todos: _.filter(this.state.todos, {done:false})})">Clear done</button>\n</div>';
+var templateProps = '{\nmixins: [React.addons.LinkedStateMixin],\ngetInitialState: function () {\n return {edited: "", todos: [], counter: 0};\n},\nadd: function () {\n this.setState({todos: this.state.todos.concat({value: this.state.edited, done: false,key:this.state.counter}), edited: "", counter: this.state.counter+1})\n}\n}';
 
 var Playground = React.createClass({
 
@@ -71,8 +73,8 @@ var Playground = React.createClass({
 
     getInitialState: function () {
         var currentState = {
-            templateHTML: '<div>\n hello {this.state.name}\n</div>',
-            templateProps: '{getInitialState: function () {return {name:"reactTemplates"}}}'
+            templateHTML:templateHTML,
+            templateProps: templateProps
         };
         this.updateSample(currentState);
         return currentState;