JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div al-app="main">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="buttons btn-group">
        <button class="btn btn-success" @click="add()" :disabled="loading">добавить</button>
        <button class="btn btn-danger" @click="save()" :disabled="loading">сохранить</button>
      </div>
    </div>
  </div>
  <div class="list">
    <div class="alert alert-info" :hidden="!loading">загружается...</div>
    <div class="alert alert-danger" :hidden="list.length || loading">нет записей</div>
    <div>
      <div class="input-group item" al-repeat="item in list">
        <input type="text" class="form-control input-lg" al-value="item.login">
        <span class="input-group-btn">
          <button class="btn btn-default btn-lg" @click="del($index)">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </span>
      </div>          
    </div>
  </div>
</div>

CSS

.item {
    margin: 5px 0;
}
.list {
    padding-top: 60px;
}
.buttons {
    margin: 10px;
}

TypeScript

alight.ctrl.main = function(scope) {
	scope.list = [];
  scope.add = => {scope.list.push({login: ''})};
  scope.del = (i) => {scope.list.splice(i, 1)};
  scope.save = => {
  	scope.loading = true;
    setTimeout( () => {  // can be $.post
    	scope.loading = false;
      scope.$scan();
    }, 500);
  };
  
  (function() {  // load from github
  	scope.loading = true;
    $.get('https://api.github.com/search/users?q=tom+repos:%3E42+followers:%3E1000').then( (resp) => {
    	scope.loading = false;
      scope.list = resp.items;
      scope.$scan();
    })})();
};