Creating Backbone models

"So, Shawn, let's go ahead and build out our cats' collection that we want to display. For the purpose of development, we are going to use cat images from lorempixel service, for example, http://lorempixel.com/600/600/cats/. This will give us a random cat image of 600 x 600 pixels."

"Next, we are going to create a store of data using different-than-normal objects. We want to explore how to embed different model flows with our React app here. In our case, let's make use of Backbone models, instead of the PICTURES constant. I know that you have already used Backbone."

"Yup, I have used it in my previous projects."

"Alright then, let's define our Cat model."

const PictureModel = Backbone.Model.extend({
  defaults: {
    src: 'http://lorempixel.com/601/600/cats/',
    name: 'Pusheen',
    details: 'Pusheen is a Cat'
  }
});

"Here we store the src for the image of a cat, its name, and some details about it. As you can see, we have provided some default values for these attributes."

"Next, let's define our Cats collection to all the Cat records."

const Cats = new Backbone.Collection;
Cats.add(new PictureModel({src: "http://lorempixel.com/601/600/cats/", 
                                              name: Faker.Name.findName(), 
                                              details: Faker.Lorem.paragraph()}));

Cats.add(new PictureModel({src: "http://lorempixel.com/602/600/cats/", 
                                              name: Faker.Name.findName(), 
                                              details: Faker.Lorem.paragraph()}));
…

"Here, we making use of the Faker module to create random names for the cats using Faker.Name.findName(), adding random description using Faker.Lorem.paragraph() and passing the source as needed."

"Cool," said Shawn. "Let me see how this looks now."

//models.js
import Backbone from 'backbone';
import Faker from 'faker';

const PictureModel = Backbone.Model.extend({
  defaults: {
    src: 'http://lorempixel.com/601/600/cats/',
    name: 'Pusheen',
    details: 'Pusheen is a Cat'
  }
});

const Cats = new Backbone.Collection;
Cats.add(new PictureModel({src: "http://lorempixel.com/601/600/cats/", name: Faker.Name.findName(), details: Faker.Lorem.paragraph()}));
…
Cats.add(new PictureModel({src: "http://lorempixel.com/606/600/cats/", name: Faker.Name.findName(), details: Faker.Lorem.paragraph()}));

module.exports = {Cats, PictureModel};
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset