Firebase 1

First firebase test

by tyrsius

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sugar/1.3.9/sugar.min.js"></script>
<script src="https://rawgithub.com/tyrsius/FireBind/master/firebind.js"></script>
<form data-bind="submit: addUser">
    <input data-bind="value: newUsername" />
    <button type="submit">Add User</button>
</form>
<button data-bind="click: reset">Reset</button>

        <ul data-bind="template: { name: 'user', foreach: users }">  
        </ul>

        <script type="text/knockout" id="user">
            <li>
                <!-- <span data-bind="text: id"></span> - -->
                <input data-bind="value: firstName" />
                <input data-bind="value: lastName" />
                <button data-bind="click: $parent.removeUser">Delete</button>
                <button data-bind="click: addChild">Add Child</button>
                <ul data-bind="template: { name: 'user', foreach: children }"></ul>
            </li>
        </script>

JavaScript

var root = new Firebase('https://tyr-fiddle.firebaseIO.com');

var User = function(id, data, fireRef) {
    var self = this;
    self.id = id;

	var map = {
		firstName: data.firstName || '',
		lastName: data.lastName || ''
	}
    ko.fireModel(self, map, fireRef);    
    
    self.children = ko.fireSet(fireRef.child('children'), User);    
    self.addChild = function() {
        self.children.push({ firstName: 'Baby' });
    };
    self.removeUser = function(item) {
        self.children.remove(item);
    };
};

var ViewModel = function(firebase) {
    var self = this;
    
    self.users = ko.fireSet(firebase.child('users'), User);    
    self.newUsername = ko.observable();
    
    self.addUser = function() {
        self.users.push({firstName : self.newUsername()});
        self.newUsername('');
    };
    
    self.removeUser = function(user) {
        self.users.remove(user);
    };
    
    self.reset = function() {
        self.users.removeAll();
        self.users.push({ 
            firstName: 'look, data persisted', 
            lastName: 'by Firebase',
            children: [
                { firstName: 'and bound', lastName: 'by Knockout!' }   
            ]
        });
    };
};

ko.applyBindings(new ViewModel(root));