JSFiddle - React, Tailwind, and code Playground

by cherif_b

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/can.js/1.1.3/can.jquery.min.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<div id="test"></div>
<button id="nested">Change Nested Property</button>
<button id="message">Change Message</button>

<script id="template" type="text/handlebars">
   <ul>
     {{#todos}}
     <li>{{.}}</li>
     {{/todos}}
  </ul>
  <div>{{message}}</div>
</script>



<div id="test2"></div>

<script id="template2" type="text/handlebars">
   <ul>
     {{#obTodos}}
     <li>{{name}}</li>
     {{/todos}}
  </ul>
  <div>{{message}}</div>
</script>

JavaScript

var obj = { 
  obTodos: [ {name:'Line #1'}, {name:'Line #2'}, {name:'Line #3'} ],
  todos: [ 'Line #1', 'Line #2', 'Line #3' ],
	message: 'Hello' 
};

var cObj = new can.Observe(obj);

var template = can.view("#template", cObj);
can.$('#test').append(template);

var template2 = can.view("#template2", cObj);
can.$('#test2').append(template2);



$("#nested").click(function () {
  cObj.attr('todos').attr('0','Line #4 Changed');
  cObj.attr('obTodos.1').attr({'name':'Line #4 Changed'});
});

$("#message").click(function () {
   cObj.attr('message', 'Hello Again');
});