JSFiddle - React, Tailwind, and code Playground

by ItsLeeOwen

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://s3.amazonaws.com/itsleeowen/angularfire.js"></script>
<div ng-app="app">
    <span ng-controller="Ctrl">
        
        <!-- directive example -->
        <div firebase
            domain="https://lee.firebaseio.com" 
            location="stuff"
            class="stuff">
            <button class="btn btn-primary" 
                ng-click="stuff.push({value: 'new thing '+stuff.length})">CREATE THING</button>
            <div ng-repeat="thing in stuff">
                <input type="text" ng-model="thing.value" />
            </div>
        </div>
        
        <!-- js string reference example-->
        <div class="gizmos">
            <button class="btn btn-info" 
                ng-click="gizmos.push({value: 'gizmo '+gizmos.length})">CREATE GIZMO</button>
            <div ng-repeat="gizmo in gizmos">
                <input type="text" ng-model="gizmo.value" />
            </div>
        </div>
        
        <!-- js explicit example-->
        <div class="knicknack">
            <button class="btn btn-success" 
                ng-click="knicknackify()">CREATE KNICKNACK</button>
            <div ng-repeat="(key, value) in knicknack">
                <input type="text" ng-model="knicknack[key]" />
            </div>
        </div>
    </span>
</div>

CSS

button, input {
    margin: 5px 0px 0px 0px;
}
.stuff, .gizmos, .knicknack {
    padding-bottom: 5px;
    overflow-y: scroll;
    height: 160px;
    width: 100%;
    border-bottom: 2px solid #ccc;
}

JavaScript

console.clear();
var module = angular.module('app', ['firebase']);

function Ctrl($scope, angularFireResource) {
    // string reference example
    //// alternatively you could pass
    //// a reference to an array or object
    angularFireResource(
        'https://lee.firebaseio.com/gizmos', 
        $scope,
        'gizmos'
    );
    
    // explicit example
    var resource = angularFireResource(
        'https://lee.firebaseio.com/knicknack'
    );
    resource.promise.then(function(knicknack) {
        $scope.knicknack = knicknack;
        $scope.$watch('knicknack', function(a) {
            resource.set(a);
        }, true);
    });
    
    // method to add new properties to
    // /knicknack firebase object
    $scope.knicknackify = function() {
        var time = new Date().getTime();
        $scope.knicknack[time] = 'knicknack property '+time;
    }
}