KnockoutFire map Firebase json structure into HTML structure using KnockoutJs.
Latest release may have breaking changes.
I recommend to use versioned release, like 0.0.4 instead.
<script type="text/javascript" src="//hiroshi.github.io/knockoutFire/knockoutfire-0.0.4.js"></script>
Also see CHANGELOG.
items: {
-XXX: {
content: "Hello"
}
-YYY: {
content: "World."
}
}<div id="viewModel">
<ul data-bind="foreach: items">
<li data-bind="text: content"></li>
</ul>
</div>var firebase = new Firebase("https://knockoutFire-README-example.firebaseio-demo.com");
var viewModel = KnockoutFire.observable(firebase, {
items: {
"$item": {
content: true,
}
}
});
ko.applyBindings(viewModel, document.getElementById("viewModel"));The notation resembles to Firebase Security Rule.
You need to specify which properties are used as observable properties of view models. KnockoutFire will retrieve only what specified in the map.
- Each properties will be a
ko.observable()and synchronized with the corresponding value in Firebase.
person: {
firstName: true,
lastName: true
}If you use a property name start with $, the parent property will be ko.observableArray().
users: {
"$user": {
nickname: true,
}
}For add/remove/move operations, you should use Firebase API instead of manipulating observable array directly.
users()[1]().firebase.remove();If you need reverse order;
comments: {
".reverse": true,
"$comment": {
content: true
}
}comments: {
".startAt": 0,
".endAt": {
".priority": 100,
".name": "foo"
},
".limit": 20
}Querying and Limiting Data in Firebase | Firebase Documentation
.newItem adds additional sub viewModel to an observable array.
comments: {
".newItem": true,
"$comment": {
content: true
}
}<div data-bind="with: comments.newItem">
<form data-bind="submit: create">
<input type="text" data-bind="value: content">
<input type="submit">
</form>
</div>If you need a priority to be set;
".newItem": {
".priority": function() { return Date.now() }
}If you need a default value rather than from a data-bind;
".newItem": {
isdone: function(){ return false; }
}If you need a callback on success;
".newItem": {
".on_success": function(){ do_someting(); }
}To use Denormalized data use .indexOf.
members: {
"$user": {
".indexOf": "/users/$user",
"nickName": true
}
}You can access nickName like this:
members()[0]().nickName()You can use Knockout extender.
ko.extenders.person = function(self, option) {
self.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
});
};Then specify the extender by name:
person: {
firstName: true,
lastName: true,
".extend": {person: true}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent