Backbone.LocalStorage stores a list of players client-side when calling create on a players collection, but the stored models are not being fetched later, even though I can inspect them in localStorage. I can call #collections.players.localStorage.findAll() to retrieve all the stored objects and manually push them onto my collection.
class App.Models.Player extends Backbone.Model
defaults:
name: 'Unnamed'
team: 'Unassigned'
class App.Collections.Players extends Backbone.Collection
localStorage: new Backbone.LocalStorage('players')
model: App.Models.Player
class App.ViewModels.Game extends kb.ViewModel
constructor: ->
#collections =
players: new App.Collections.Players()
#collections.players.fetch(
success: (collection) =>
console.log(collection) # shows none
console.log(#collections.players.localStorage.findAll())
# shows all the stored players
)
# #players below is rendered by a foreach in a knockout template
#players = kb.collectionObservable #collections.players, { view_model: App.ViewModels.Player }
addPlayer: -> # called when a button is pressed
#collections.players.create(new App.Models.Player({ name: 'New Player' }))
return
Why is Knockback unable to fetch the stored entities automatically?
The following call manually retrieves all objects:
_.each #collections.players.localStorage.findAll(), (elem) =>
#collections.players.add(elem)
Related
I'm building an Ionic app with Angular that uses Firebase as the auth / database.
On my app, the user can create different things, or objects. I then take those objects and put them into an array. So I end up with an array of objects. The user can delete things in that local list, changes things, or add new things.
What I want is to be able to fetch the object (that I successfully store) in Firebase, and set it back as the object. I'm new to Firebase and it's api, so I'm a little stuck. Here's my code to retrieve the object from Firebase:
fetchList() {
const user = this.authService.getActiveUser();
if (user != null) {
return firebase.database().ref(user.uid + '/lists').once('value')
.then( snapshot => {
return snapshot.val();
})
.catch( err => {
return err;
});
}
}
I've read all over the Firebase docs and I cant figure out what snapshot.val() returns. Does it return an object or what. If it does, will I have to parse through the object to rebuild my local array of objects?
This is an example structure of some data in Firebase. 0 is the array index. I basically just pass in my array of objects and Firebase stores it like this. Now I want to retrieve it and set it equal to my local array of objects, so the user can have
+ Sidfnh450dfFHdh989490hdfh
- DFjghd904hgGHdhfs9845hfh0
- lists
- 0
hasProperty1: false
isProperty2: false
otherProperty: 'string stuff here'
title: 'List Title'
+ 1
+ 2
Or maybe I'm going about this all wrong. Maybe there exists a magical Firebase method that's similar to two-way data binding, whatever I change on the local object array mirrors Firebase, and vice versa. Any advice appreciated.
Edit
Additionally, something I'm doing locally is reordering the array. My app is a list of some kind, and users can reorder objects in the list. So if I did have a synchronized list with Firebase, and someone reordered some objects in the list, I'm not sure how I would reorder them in Firebase without deleting the entire object-array and writing a new one with the updated array indexes.
If you adjusted the way you stored the data in Firebase you could pull it out in a predefined order.
Notice the additional order key on your list.
+ Sidfnh450dfFHdh989490hdfh
- DFjghd904hgGHdhfs9845hfh0
- lists
- key1
hasProperty1: false
isProperty2: false
otherProperty: 'string stuff here'
title: 'List Title'
order: 1
+ keyn
// ...
order: 2
+ keyz
// ...
order: 3
Within your component you can request that the data comes out in order with a query on the list object.
When saving the new order you can pass the key such as key1, key2 and the new order to the saveOrder function.
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
#Component({
selector: 'app',
templateUrl: `
<ul *ngFor="let item of list | async">
<li>{{ item | json }}</li>
</ul>
`,
styleUrls: ['./app.scss']
})
export class AppComponent implements OnInit {
public list: FirebaseListObservable<any[]>;
constructor(
private db: AngularFireDatabase
) {}
ngOnInit() {
this.list = this.db.list('/DFjghd904hgGHdhfs9845hfh0/list', { query: { orderByChild: 'order' }});
}
saveOrder(key, newOrder) {
return this.list.update(key, { order: newOrder });
}
}
I am new to backbone.js and I am trying to learn it. In the code below I want my collection called "JokesCollection" to only accept adding models of the class "Joke". How do I do achieve this? When setting "Collection" attribute "model" to a certain model, isn´t the collection supposed to only accept that model class and ensure homogeneity? Don´t seam so. When I assign attribute "model" in the "JokesCollection" class to "Joke" it still accepts adding models of class "Persson" witch is not what I want. I only want it to accept adding models of class "Joke".
Joke = Backbone.Model.extend ({
initialize: function(){
console.log("Joke was created");
},
defaults: {
joke : "",
date : "0",
}
});
JokesCollection = Backbone.Collection.extend({
initialize: function(){
console.log("JokesCollection was created");
},
model: Joke // <=== Isn´t this supposed to ensure that the collection only accepts models of class "Joke"?
});
Person = Backbone.Model.extend ({
initialize: function(){
console.log("Person was created");
},
defaults: {
username: "default",
password: "default",
email: "default"
}
});
var person1 = new Person({username:"masterMind"});
var joke1 = new Joke({joke:"Girls are cute and funny hahahaha"});
jokesCollection = new JokesCollection();
jokesCollection.add(joke1);
jokesCollection.add(person1); // This adds a model of class "Person" to the collection. Witch is not what I want. It is not supposed to work! I want "jokesCollection" to only accept models of class "Joke".
console.log(jokesCollection.length); // length gets increased by 1 after adding "person1" to "jokesCollection". Again, it is no supposed to work from my point of view. I want "jokesCollection" to only accept models of class "Joke".
console.log(jokesCollection);
From official docs:
model collection.model
Override this property to specify the model class that the collection
contains. If defined, you can pass raw attributes objects (and arrays)
to add, create, and reset, and the attributes will be converted into a
model of the proper type.
Looks like will have to re-write add method something like this :
add: function(models, options) {
var modelClass = this.model;
isProperIns = this.models.every.(function(model){
return model instanceof modelClass;
});
if (!isProperIns) {
throw new Error("Some of models has unacceptable type")
}
return this.set(models, _.extend({merge: false}, options, addOptions));
}
The purpose of a Collection's model property is not to limit which models the Collection can accept. Rather, that property defines the Model class which the Collection will use when it needs to create a new Model. For instance,when you pass an object literal of Model attributes (as opposed to an instantiated Model) to JokesCollection.add, or when you fetch models in to a JokesCollection, Backbone will use Joke as the Model to instantiate those new additions to the Collection.
There are two ways to ensure your JokesCollection is only populated with instances of Joke. The first way is to never add Model instances to the JokesCollection directly, and instead either:
A) Bring new Jokes in from the server by calling fetch on a JokesCollection
B) add only "raw" Model attributes to the JokesCollection; don't add instantiated Models
However, if you're concerned about a developer accidentally adding a non-Joke Model to the Collection, your other option (as first suggested by #Evgeniy) is to overwrite your JokesCollection's add method. Unlike #Evgeniy's answer though I would not recommend re-writing Backbone's internals. Instead, I would use a simple overwrite that just calls the base Backbone method if possible:
add: function(models, options) {
if (models instanceof Joke) {
// Use the normal Backbone.Collection add method
return Backbone.Collection.prototype.add.call(this, models, options);
}
var allModelsAreJokes = _(models).all(function(model) {
return model instanceof Joke;
));
if (allModelsAreJokes) {
// Use the normal Backbone.Collection add method
return Backbone.Collection.prototype.add.call(this, models, options);
}
// Handle the case where non-Jokes are passed in; either:
// A) convert whatever was passed in to be a Joke:
// var rawModels = _(models).isArray() ? _(models).invoke('toJSON') : model.toJSON();
// return Backbone.Collection.prototype.add.call(this, rawModels, options);
// B) just don't add anything
}
I have an API resource that gives me a list of users that each have several items. The hierarchy is like so:
- users
- user
- items
- item
- item
- item
- user
- items
- item
- item
- item
I would like to display the list of users on a single page, with each user entry displaying each of its items on the page as well.
When any one of these items is clicked, it should set an chosen attribute that is accessible through the overall users collection.
I'm having difficulty getting the item click information to bubble back up. My current implementation is creating a separate items collection in order to render the view, but then I lose the connection to its original user model, so I can't notify it when the item is selected.
My views are structured like so:
class List.Item extends Marionette.ItemView
template: "path/to/template"
events:
"click" : "choose"
choose: (e) ->
# what to do?
class List.User extends Marionette.CompositeView
collection: #collection
template: "path/to/template"
itemView: List.Item
itemViewContainer: "span"
initialize: ->
#collection = new App.Entities.Items(#model.get("items"), parent: #)
events:
"click a" : "toggleChoose"
#include "Chooseable"
class List.Users extends Marionette.CollectionView
itemView: List.User
Is there a better way to structure these collections or views, or is there a way to pass the information from the List.Item view to the parent List.User view and then into the users collection?
EDIT
I have tried backbone-relational, but it didn't seem to quite do what I need. Please correct me if I'm wrong here.
Your List.Item should contain it's current model with all properties at the time when choose is triggered. In this way, you can trigger other events with the List.Item's model values:
choose(e) : ->
trigger("mylistitem:choose", model)
Then listen for the event elsewhere :
itemView.on("itemview:mylistitem:choose", ( childView, model ) -> {
alert(model.get('..whatever..')
}
It is actually possible to instantiate the items collection to reference the parent user and vice-versa directly in Backbone:
class Entities.User extends Backbone.Model
...
initialize: ->
#items = new Entities.Items #get("items"),
user: #
class Entities.Items extends Backbone.Collection
...
initialize: (models, options) ->
#user = options?.user
So now the List.User CompositeView can pass this information to the List.Item ItemView:
class List.User extends Marionette.CompositeView
collection: #collection
...
initialize: ->
#collection = #model.items
With this in place, it is possible to access the user directly from the ItemView:
class List.Item extends Marionette.ItemView
...
events:
"click" : "choose"
choose: (e) ->
e.preventDefault()
user = #model.collection.user
console.log "user: ", user
And from there it's possible to take any necessary actions on the user and its collection.
I have a backbone collection where the collection is fetched by a url with an id parameter (not RESTful)
url: '/api/categories/?level=2&id=',
So id might be
&id=2
or
&id=45
How do I go about doing this? I've been reading different posts and some say to override Backbone Sync and others say to just do a fetch but modify the data parameters...
When you construct the Collection, pass the id as parameter (by default, Collection do not have an id property while Model do).
Then, override the url property of the Collection and pass a function:
MyCollection = Backbone.Collection.extend({
initialize : function(models, options) {
this.id = options.id;
},
model : // Your Model class
url: function() {
return '/api/categories/?id=' + this.id;
}
});
// [] is the initial, empty set of models
var coll = new MyCollection([], { id: 45 });
coll.fetch(); // the correct url will be called
I have a collection of Animals.
App.Collections.Animals extends Backbone.Collection
model: App.Animal
url: '/animals/' #returns json
And these animal classes:
App.Models.Animal extends Backbone.Model
App.Models.Monkey extends App.Models.Animal
defaults:{type:'Monkey'}
App.Models.Cat extends App.Models.Animal
defaults:{type:'Cat'}
App.Models.Dog extends App.Models.Animal
defaults:{type:'Dog'}
When collection is filled with JSON (records contain the type attribute) I want models to be instantiated as sub-classed models (Monkey,Cat,Dog) and not as Animal. How can you achieve this?
From Backbone documentation:
A collection can also contain polymorphic models by overriding this
property with a function that returns a model.
var Library = Backbone.Collection.extend({
model: function(attrs, options) {
if (condition) {
return new PublicDocument(attrs, options);
} else {
return new PrivateDocument(attrs, options);
}
}
});
The solution is straightforward (pardon the JS, I don't know CoffeeScript):
var SmartZoo = Backbone.Collection.extend({
model: function (attrs, options) {
// This code assumes that the object looks something like '{ type: "Cat", ... }'.
switch (attrs.type) {
case 'Cat':
return new Cat(attrs, options);
case 'Dog':
return new Dog(attrs, options);
default: // Unknown subclass
return new Animal(attrs, options);
}
}
});
You have to:
Include an attribute in your model from which you can infer the type of Backbone model to create. In this example, my objects contain an attribute called "type" whose value is the full name of the Backbone type that represents it. Be sure to set it in the defaults or initialize of your Model so that you can also add real model instances to the collection.
Define the models property of your collection as a function. The first parameter to this function will be the raw JS object (if that's what you passed in), or the attributes object of a Backbone model. Either way, you can access your type field as a property of this object.
Execute your logic to infer the proper model from your type field.
Return an instance of the correct model from the models function.
Here is a JSFiddle that shows this polymorphic collection in action: http://jsfiddle.net/FiddlerOnTheTarmac/uR2Sa/
Override backbone collection's _prepareModel. The collection new uses subclasses when defined otherwise uses the default model.
class App.Collections.Animals extends Backbone.Collection
model: App.Models.Animal
_prepareModel: (attrs, options) ->
if attrs instanceof Backbone.Model
attrs.collection = #
return attrs
options || (options = {})
options.collection = #
model_class = APP.Models[attrs.ntype] or this.model
model = new model_class(attrs, options)
if (!model._validate(attrs, options))
false
else
model