I'm not sure why, but I can't get this to work.
var friends = new Backbone.Collection([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
friends.where({job: "Musketeer"}).toJSON()
I'm getting Uncaught TypeError: Object [object Object] has no method 'toJSON'.
What I'm I doing wrong and how do I convert my filtered collection into JSON?
What the Underscore.where method returns is an Array not a Backbone.Collection so it has not the toJSON method defined.
So you can make two things:
Iterate over elements and map the result:
var result = friends.where({job: "Musketeer"});
_.map( result, function( model ){ return model.toJSON(); } );
jsFiddle code
Implement a Collection searcher method that returns a proper Backbone.Collection:
var Friends = Backbone.Collection.extend({
search: function( opts ){
var result = this.where( opts );
var resultCollection = new Friends( result );
return resultCollection;
}
});
var myFriends = new Friends([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
myFriends.search({ job: "Musketeer" }).toJSON();
jsFiddle code
toJSON is a confusing method name : http://documentcloud.github.com/backbone/#Collection-toJSON
toJSON collection.toJSON()
Return an array containing the attributes hash of each model in the collection. This can be used to serialize and >persist the collection as a whole. The name of this method is a bit confusing, because it conforms to JavaScript's >JSON API.
if you want to convert your collection to a JSON string, use JSON.stringify
var friends = new Backbone.Collection([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
JSON.stringify( friends.where({job: "Musketeer"}) );
Note that where returns an array, not a Backbone collection, you would have to build a new collection to use the toJSON method.
Related
I made a question earlier which is mostly confused nonsense
(Mongoose, array in object)
Now I Think I have narrowed it down to the following:
I have a list of drivers which has an Array of cars:
var driverSchema = new mongoose.Schema({
driver: String,
age: String,
cars: [{ type: Schema.Types.ObjectId, ref: 'Car' }]
});
module.exports = mongoose.model('Driver', driverSchema);
A driver-object can be selected to ChoosenDriver like so:
this.setState({choosenDriver:driver})
The problem is that the object Changes when selected. It changes from this:
drivers: array[3]
->0: {}
->1: {}
_v: 0
_id: "4242594395935934"
name: "Roger"
cars: Array[1]
to this:
choosenDriver: {..}
_v:0
_id: "235345353453"
name: "Roger"
cars:
->_proto_ :{..}
0: "4242594395935934",
_id: undefined
cars is no longer an Array when the driver is selected.
Anyone run into something similar maybe?
Update:
I pass the list of drivers to a Child Component like this:
<DriversList drivers={this.props.drivers}
In DriversList i select a driver like this:
(render-func should be enough to show you)
handleDriverClick: function(i) {
this.props.setChoosenDriver(this.props.drivers[i])
},
render: function(){
var self = this;
var drivers = this.props.drivers.map(function(driver,i){
return <li key={driver._id} onClick={self.handleDriverClick.bind(null, i)}> {driver.name} </li>;
});
And in the Parent :
setChoosenDriver: function(driver) {
this.props.setChoosenDriver(driver)
},
And finally in the GrandParent i set the state:
setChoosenDriver: function(driver) {
this.setState({choosenDriver:driver})
},
Update:
getInitialState: function() {
return {
drivers:[]
};
},
componentWillMount: function(){
var self = this;
request
.get(Driversurl)
.end(function(err, res){
self.setState({drivers: res.body});
});
},
Its an Array of drivers wtih objects like:
{"_id":"5607b0747eb3eefc225aed61","name":"Moore","__v":0,"cars":["5607b0747eb3eefc225aed61","5607b07a7eb3eefc225aed62","5606bf4b0e76916c1d1668b4","5607b07a7eb3eefc225aed62"]}
don't execute your request in componentWillMount this is really wrong , execute it in componentDidMount, see this for more details : bind(this) not working on ajax success function
Also I would parse you request result when you receive it, your problem may come from here
self.setState({drivers:JSON.parse(res.body)});
So I have a model in Ember that is generating a hash with three objects. One of the objects is an array of objects with another array inside each object. I need to sort this innermost array, but I am having trouble doing so.
Here are my models.
App.Person = DS.Model.extend ({
first_name: DS.attr('string'),
last_name: DS.attr('string'),
age: DS.attr('string'),
gender: DS.attr('string'),
innerMostArray: DS.hasMany('innerMostObject')
});
App.innerMostObject = DS.Model.extend ({
person_id: DS.belongsTo('person'),
attr1: DS.attr('string'),
attr2: DS.attr('string')
});
Here is my Route
App.NestedArrayRoute = Ember.Route.extend({
model: function(params) {
return Ember.RSVP.hash({
object1: this.store.find('object1', params.object1_id),
people: this.store.all('person'),
object3: this.store.all('object3')
});
},
afterModel: function(model, transition) {
model.people.forEach(function(item, index, enumerable){
var innerMostArray = item.get('innerMostArray');
var sortedArray = innerMostArray.sortBy('attr1', 'attr2');
});
model.people.update();
}
});
I know that I am nowhere near doing this right but I just don't know how to sort this nested array. I've seen examples of array controllers, but I don't know how to use one to sort this nested array. If anyone could give an example of how to do this it would be very helpful. Thank you.
I agree with Kalmans answer, but I suggest you do this sorting with built-in methods to save you trouble:
App.Person = DS.Model.extend({
name: DS.attr('string'),
fruits: DS.hasMany('fruit', {async: true}),
fruitSorting: ['title', 'color'],
sortedFruits: Ember.computed.sort('fruits', 'fruitSorting')
});
I forked his example here: http://emberjs.jsbin.com/manutu/1/edit?html,js,output
One way to do this is to create a computed property on the model as follows:
App.Person = DS.Model.extend({
name: DS.attr('string'),
fruits: DS.hasMany('fruit', { async: true }),
sortedFruits: function(){
var fruits = this.get('fruits');
return fruits.sortBy('title', 'color');
}.property('fruits.#each.title', 'fruits.#each.color')
});
Working example here
I have a JSON object to my collection with JSONStore like this:
{
name : 'name1',
industry : ['Banking', 'Energy', 'Insurance', 'Media', 'Retail', 'Telco', 'Travel'],
buyer : ['CMO'],
link : 'foo.com'
}
But, how is possible declare the industry field into searchFields?, in order to search a pattern in the array.
Cheers
There's no array type for search fields. You can only index values in objects that are string, boolean, number and integer.
You could change:
{ industry : ['Banking', 'Energy'] }
to:
{ industry : [{name: 'Banking'}, {name: 'Energy'}] }
and then use the following search field: {'industry.name' : 'string'}. That will enable you to do something like WL.JSONStore.get('collection').find({'industry.name' : 'Banking'}, {exact: true}) and get back an object like this one:
[{_id: ..., json: {name: ..., industry: [..., {name: Banking}, ...], buyer: ..., link: ...}}]
This is documented under the search field section of general terminology in the documentation here.
That would mean writing code like this to change the data being added to the collection:
var output = [];
['Banking', 'Energy', 'Insurance', 'Media'].forEach(function (element) {
output.push({name: element});
});
console.log( JSON.stringify(output, null, ' ') );
Alternatively, you could also change it into a string:
{industry : ['Banking', 'Energy', 'Insurance', 'Media'].toString() }
and get back something like this:
{industry : "Banking,Energy,Insurance,Media"}
Then you can use the search field {industry : 'string'} and do something like WL.JSONStore.get('collection').find({industry: 'Energy'}, {exact: false}) to get objects that have Energy somewhere in the industry value string.
FYI - Feature requests here.
So my template thus far:
<script id="table-row" type="x-handlebars-template">
<tr>
{{#each this}}
<td>{{.}}</td>
{{/each}}
</tr>
</script>
And my render code:
that.collection.each(function(model){
var template = Handlebars.compile( $('#table-row').html() );
that.table.append(template(model.toJSON()));
});
Any my dummy data collection:
this.collection = new Backbone.Collection([
{name: "Tim", age: 5},
{name: "Ben", age: 26},
{name: "Rob", age: 55}
]);
Now, how can I create a template that can output as many <td>s as there are object keys in my Model? ie. I have 'name' and 'age' now, but what I add 'height', I have to specifically update this template, how can I create a generic table row template?
I think you'll need a custom Handlebars helper to iterate over object keys. I haven't used it but something like this should do the trick.
Here's the code from that link:
// HELPER: #key_value
//
// Usage: {{#key_value obj}} Key: {{key}} // Value: {{value}} {{/key_value}}
//
// Iterate over an object, setting 'key' and 'value' for each property in
// the object.
Handlebars.registerHelper("key_value", function(obj, fn) {
var buffer = "",
key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
buffer += fn({key: key, value: obj[key]});
}
}
return buffer;
});
Let's suppose I have the following model (model1) and collection (collection1)
model1.attributes = {
name: 'bar'
};
collection1.models = [{}, {}, {}];
It will be possible by using backbone relation to make the model1 to know about the length of collection1?
model1.attributes = {
name: 'bar',
collection1Length = 3 // collection1.models.length
}
Thanks
Based on your comments, it might be best to simply create a reference to the collection itself within the model:
ModelName = Backbone.Model.extend({
...
linked_collection: null // don't call this 'collection', as model.collection already exists
...
}
var model1 = new ModelName();
model1.set('linked_collection',collection1);
Now you can do this at any time to get the linked collection's length.
model1.get('linked_collection').length