KnockoutFire demo

by hiroshi

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://hiroshi.github.io/knockoutFire/knockoutfire-0.0.4.js"></script>
<div id="items">
<ul data-bind="foreach: items">
  <li>
      <input type="text" data-bind="value: content, valueUpdate: 'keyup'"/> 
      <a data-bind="click: $parent.removeItem" style="color:red;" href="#">[x]</a>
  </li>
</ul>
<!-- ko with: items.newItem -->
<form data-bind="submit: create">
    <input data-bind="value: content" />
    <button type="submit">push</button>
</form>
<!-- /ko -->
</div>

<ul>
    <li><a href="https://knockoutfire.firebaseio-demo.com/" target="_blank">Open the Forge</a></li>
    <li><a href="https://github.com/hiroshi/KnockoutFire" target="_blank">KnockoutFire at Github</a></li>
</ul>

CHANGELOG
<ul>
    <li>2013-05-07: update knockoutFire.js to 0.0.4</li>
    <li>2013-05-07: change the form to use `newItem`</li>
</ul>

JavaScript

var firebase = new Firebase("https://knockoutfire.firebaseio-demo.com/items");
var viewModel = {
    "items": KnockoutFire.observable(
        firebase, {
            "$item": {
                "content": true
            },
            ".newItem": {
                ".priority": function() { return Date.now() }
            }
        }
    ),
    "removeItem": function(item) {
        firebase.child(item.firebase.name()).remove();
    }
};
ko.applyBindings(viewModel, document.getElementById("items"));