Fill in checkbox array with new collection - json

Question

I'm trying to fill a checkbox array with a JSON array from the request URL. I have read the documentation and I see that I could do this with models and collections, but I'm not sure how to start. If anyone could show me what the path is, I would appreciate it. This is my code:
var mBox = Backbone.Model.extend({
});
var cBox = Backbone.Collection.extend({
model: mBox,
url: 'http://localhost/oferta/prueba1/?json=get_taxonomy&taxonomy=habilidad&dev=1'
});
var Form = Backbone.Model.extend({
schema: {
id: {},
nombre: {},
apellidos: {},
email: { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
telefono: { type: 'Text', dataType: 'tel', validators: ['required'] },
nacionalidad: { type: 'Select', options: ['Española', 'Extranjera'] },
link1: { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
link2: { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
otros: { type: 'Text', dataType: 'url' },
skills: { type: 'Checkboxes', options: new cBox() },
}
});

Answer 1

You're off to a good start. What I think might be tripping you up is how the data is actually fetched and placed into the collection. You have a defined a url property on cBox, your collection, but that itself does not actually get any data from the server. You have to call Backbone's Collection.fetch() method to get the data and put it into the collection.
I would do something like this:
cBoxCheckboxes = new cBox(); // create a new cbox, but there is no data in here yet
cBoxCheckboxes.fetch(); // make a get request to the server (at the url you've specified) to get the data
var Form = Backbone.Model.extend({
schema: {
id: {},
nombre: {},
apellidos: {},
email: { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
telefono: { type: 'Text', dataType: 'tel', validators: ['required'] },
nacionalidad: { type: 'Select', options: ['Española', 'Extranjera'] },
link1: { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
link2: { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
otros: { type: 'Text', dataType: 'url' },
skills: { type: 'Checkboxes', options: cBoxCheckboxes /* the collection with the data in it */ },
}
});

Answer 2

that solutions doesnt work like, i would like.. I rewrite the code and i do this:
var mmyBox = Backbone.Model.extend({});
var cmyBox = Backbone.Collection.extend({
model: mmyBox,
url: 'http://localhost/wordpress/oferta/prueba1/?json=get_taxonomy&taxonomy=habilidad&dev=1',
parse: function (resp, xhr) {
console.log(resp.terms);
return resp.terms;
}
});
function validateEmail(str) {
var regex = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
return regex.test(str) ? null : 'Invalid email';
}
var Form = Backbone.Model.extend({
schema: {
id: {},
nombre: {},
apellidos: {},
email: { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
telefono: { type: 'Text', dataType: 'tel', validators: ['required'] },
nacionalidad: { type: 'Select', options: ['Española', 'Extranjera'] },
link1: { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
link2: { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
otros: { type: 'Text', dataType: 'url' },
skills: { type: 'Checkboxes', options: new cmyBox() },
}
});
The parse function gives back the array terms from the json.
Array
{
"status": "ok",
"count": 3,
"terms": [
{
"id": 11,
"slug": "artist",
"title": "artist",
"description": "",
"post_count": 1
},
{
"id": 13,
"slug": "medico",
"title": "medico",
"description": "",
"post_count": 1
},
{
"id": 12,
"slug": "programador",
"title": "programador",
"description": "",
"post_count": 1
}
]
It seems than the new cmyBox doesnt create the new collection. Well that its what i see by console.
Thanks Josh for the answer. Cheers.