JSFiddle - React, Tailwind, and code Playground

by toddmotto

HTML

<div ng-app="app">
  <div ng-controller="ParentController as parent">
    <h3>
      Two way data-binding
    </h3>
    <div class="section">
      <h4>
        Parent
      </h4>
      <p>
        Object: {{ parent.someObject }}
      </p>
      <p>
        Primitive: {{ parent.somePrimitive }}
      </p>
      <a href="" ng-click="parent.updateValues();">
        Change Parent Values
      </a>
    </div>
    <example obj="parent.someObject" prim="parent.somePrimitive"></example>
  </div>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0/angular.js"></script>
<style>
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #fff; margin: 0; padding: 0; text-align: center; }
div[ng-app] {
  margin: 0 25px 25px;
}
h3 {
  font-weight: 900;
  font-size: 20px;
}
h4 {
  font-weight: 900;
  font-size: 18px;
  margin: 0 0 10px;
}
.section {
  float: left;
  width: 49%;
  padding: 15px;
  margin: 0 .5%;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
}
@media screen and (max-width: 500px) {
  .section { width: 100%; margin: 0 0 10px; }
}
.section a {
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background: #337ab7;
  border-color: #2e6da4;
}

JavaScript

var example = {
  bindings: {
    obj: '=',
    prim: '='
  },
  template: `
    <div class="section">
      <h4>
        Isolate Component
      </h4>
      <p>Object: {{ $ctrl.obj }}</p>
      <p>Primitive: {{ $ctrl.prim }}</p>
      <a href="" ng-click="$ctrl.updateValues();">
        Change Isolate Values
      </a>
    </div>
  `,
  controller: function () {
		this.updateValues = function () {
      this.prim = 10;
      this.obj = {
        john: {
          age: 35,
          location: 'Unknown'
        }
      };
    };
  }
};

function ParentController() {
  this.somePrimitive = 99;
  this.someObject = {
    todd: {
      age: 25,
      location: 'England, UK'
    }
  };
  this.updateValues = function () {
  	this.somePrimitive = 33;
    this.someObject = {
    	jilles: {
      	age: 20,
        location: 'Netherlands'
      }
    };
  };
}

angular
  .module('app', [])
  .component('example', example)
  .controller('ParentController', ParentController);