firebase-template

0.11.0 • Public • Published

firebase-template

NPM version License

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-template

Basics

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>

ISC

Readme

Keywords

Package Sidebar

Install

npm i firebase-template

Weekly Downloads

5

Version

0.11.0

License

ISC

Last publish

Collaborators

  • allain