firebase-template
v0.11.0
Published
A Firebase backed system designed for apps which contain practically no logic.
Downloads
19
Readme
firebase-template
A Firebase backed system designed for apps which contain practically no logic.
It is intended to be used with browserify or webpack.
Installation
npm install firebase-templateBasics
Using data attributes, you mark up your HTML pages for binding, iteration, and conditional display.
data-jwt
data-jwt is a token generated server side and is used to authenticate with the Firebase server.
data-path
data-path is used to specify where in the firebase structure an element should fetch its data from. If a path does not begin with / it will be treated as relative and will added to the path of its first parent with a path specified.
data-show
data-show conditionally displays an element based on whether its value is truthy.
data-type
data-type specifies how the targetted value is to be treated. It defaults to 'value' but can be specified as 'collection, which will cause the content of an element to be repeated and bound to
data-action
data-action provides a small number of actions (add, remove) that can manipulate the structure of the state tree.
Example Usage
The following snippet is the minimal bootstrap code you need to get it up and running. Once this executes, it'll start a two way binding with Firebase as configured in the HTML Page.
main.js
var FirebaseTemplate = require('firebase-template')
var template = new FirebaseTemplate();
template.start();index.html
<!DOCTYPE html>
<html>
<head>
<title>Firebase Template Example</title>
</head>
<body data-path="https://example.firebaseio.com/app1" data-jwt="TOKEN_HERE">
<h1>Firebase Template Example</h1>
Name: <input data-path="/name" /><br><br>
Email: <input data-path="/email" /><br><br>
Photo: <img data-path="/photo" width="100" data-show="/photo" />
<input type="file" data-path="/photo" />
<button data-action="remove" data-path="/photo"><br><br>
<h2>Children</h2>
<ul data-path="/children" data-type="collection">
<li>Name: <input data-path="name" />
</ul>
<button data-action="add" data-path="/children">Add Child</button>
<script src="bundle.js"></script>
</body>
</html>