I am learning backbone.js. I am using firebase for API. I can't able to display data. Can anyone help me please?
I follow instruction mention on https://github.com/firebase/backbonefire.
var realtimeList = new RealtimeList();
realtimeList.on('sync', function(collection) {
console.log('collection is loaded ', collection);
// todoView.render();
});
Collection is object.
DEMO
Your view element is not part of DOM. You need to add it to DOM. I've used el property to do so for the sake of demo.
Also you need to stringify the JavaScript object returned by toJSON() to display in DOM.
Updated demo.
Your API is returning empty collection at the moment so I've used the todoItem model created locally for demo. But it isn't part of the Firebase collection. You need to pass the collection to view and render the models inside it in order to view realtime data.
Related
I am currently trying to fetch data from FireStore using EmberFire. Right now, my collection is /users and in there I store a user ID. Under the user ID I create another subcollecion, containing an array called /presets.
I want to use EmberFire to retrieve the presets for the currently logged in user. How can I tell this to EmberFire?
I tried fetching other data using EmberFire and it worked fine. For example, fetching documents from a collection works perfectly fine, I just have never used sub collections. Hence the question.
What I would like to achieve is something like
this.store.query('/users/pLvAT0TSbAjsnXoVmMF7yEG3mkW2/presets')
to get to the data stored in (collection users) -> (document pLvAT0TSbAjsnXoVmMF7yEG3mkW2) -> (collection presets).
Of course I would like to then use the traditional workflow to turn the documents in presets into views.
Right now, I am only able to work with a single collection. Nested collections are not something I am able to work with.
Does anyone have an idea on how to solve this?
A general answer would be:
this.store.find('users', 'pLvAT0TSbAjsnXoVmMF7yEG3mkW2').then((user)=>{
return user.get('presets');
})
But it assumes some things done "the Ember way":
There's User model
There's a Preset model
There's a hasMany relationship between User and Preset like this:
// app/models/user.js
import DS from 'ember-data';
const { Model, attr, hasMany } = DS;
export default Model.extend({
presets: hasMany('preset', { subcollection: true })
});
Although the current version of Emberfire (v3-rc2) doesn't work pretty well with Subcollections, you'll be able to fetch records, but not create or update one.
Sources:
Emberfire guides (right now kind of empty, but hopefully someday it'll have good info)
I'm using the Amazon S3 storage adapter with CollectionFS.
Normally you can't store a method into MongoDB. For example, I can't have a document stored in my CustomerOrders collection with a method on it that modifies the document directly with a discount code.
CustomerOrders.findOne().addDiscountCode('SAVE50PERCENT')
But with CollectionFS and the S3 storage adapter I'm able to run a remove function to delete an item from my Images collection as well as delete it from my Amazon S3 bucket:
Images.findOne().remove(function(error, success){
console.log(success)
});
The similarity in syntax struck me. It's basically saying:
Go into the Images collection
find a random document
return it as an object
run the .remove() method that's on that object
However, actually declaring the collection is different.
Instead of doing the following to create my Images collection,
Images = new Mongo.Collection('images');
I have to do:
Images = new FS.Collection("images", {
stores: [storeName],
filter: {
allow: {
contentTypes: ['image/*']
}
}
})
I'm guessing that FS.Collection extended Mongo.Collection's findOne() method so the code can:
Go into the Images collection
find a random document
return it as an object
add a .remove() method onto this object
return this extended object
run the .remove() method that's on that object
Is this kind of correct? The .remove method isn't actually stored in the document itself. It's simply added onto the document object that's returned in findOne()?
The remove method comes from a prototype in the FS Collection package (which extends the typical collection capabilities and modifies default behavior), so you are correct.
If you take a look at the cfs:collection package, and the api.common.js, you can see exactly how these methods are defined:
api.common.js
I am using angularfire with an array like this:
var ref = new Firebase(URL);
var sync = $firebase(ref);
$rootScope.list = sync.$asArray();
I want to know the difference between using angular's $watchCollection
on 'list' and using angularfire built-in $watch like this:
$rootScope.list.$watch(function(event) {
console.log(event);
});
Which one is faster and what are the use cases of each one?
You need to think about AngularFire as a service wrapper around the Firebase API. It augments and uses features of Angular, but ultimately is meant to help you integrate back to Firebase. That being said...
scope.$watchCollection() according to the spec "shallow watches the properties of an object and fires whenever any of the properties change". It works on arrays and object maps, but watches only those objects that are held by your client.
x.$watch in AngularFire is really more an abstraction of functions that enable the 'three way data bind' feature. Note that $watch is used for both $FirebaseObject and $FirebaseArray - it does different things in each context, but essentially enable you to keep your data in the client in sync with updates on your server/Firebase.
Considering the different roles, 'faster' is not really an appropriate question. If you are using $watch in AngularFire, you would not need to use $watchCollection on the same object. For what it's worth, AngularFire's $watch is actually pretty speedy.
I'm new to the Meteor framework, and am having problems accessing data from my collection, outside of a template.
I have a small mongo collection and can retrieve and present its data without problems by using a template. However, when I try to get a cursor or array to use more directly, I get no results returned.
In my script, using find
var dataFind = Fakedata.find();
console.log(dataFind);
console.log(dataFind.count());
gives a cursor object, but a count of zero.
var dataFetch = Fakedata.find().fetch();
console.log(dataFetch);
console.log(dataFetch.length);
gives an empty array, length of zero.
Using the same find() or fetch() from the JS console gives populated objects as I would expect the code above to do. Within a meteor template, everything seems to work fine as well, so the pub/sub seems to be correct.
Any clues as to what I'm doing wrong here?
It looks like your subscriptions aren't ready at the time you try to access your collection data, this is a common gotcha.
When you access your collection data via templates, it is most likely via the use of template helpers which happen to be reactive, so they will rerun when your collections are ready thus displaying the correct data.
When accessing your collections in a non-reactive script though, they will appear empty if the subscription is not yet ready.
You can try using this pattern in your script to execute code only when the subscription is ready :
Meteor.subscribe("mySubscription",function(){
// we are inside the ready callback here so collection date is available
console.log(Fakedata.find().fetch());
});
If you are looking for a more robust approach, try looking at iron:router waitOn mechanism.
I'm trying to learn to fetch data from a database using the Backbone.js Collection method: fetch().
The jsfiddle example is here.
The object's length returned is zero which means I'm not getting any result back. I can very easily obtain the json using jquery ajax and Backbone.sync is apparently using the .ajax method too. May I know what's wrong?
You're running across two issues.
The first is that twitter's results (what you want to turn into backbone models) resides under a "results" property. To use this data, you need to override the parse method in the collection. This is the specific example used in the backbone docs:
http://documentcloud.github.com/backbone/#Collection-parse
The second issue is that the fetch() method is asynchronous, so that when you're getting the 'length' on the collection, its happening before the response comes back from twitter, so its still 0 length.
You need to set up an event handler to listen for the results of the "fetch" and THEN output the length:
var Tweet = Backbone.Model.extend();
var Tweets = Backbone.Collection.extend({
model: Tweet,
url: 'http://search.twitter.com/search.json?q=obama&callback=?',
parse: function(response) {
return response.results;
}
});
var tweets = new Tweets();
tweets.bind('reset', function(collection) {
alert(collection.length);
});
tweets.fetch();