SyntaxScrewer's Blog

October 23, 2012

Filed under: Javascript,Web — geekymaira @ 12:47 pm
Tags: , , , , , ,

Hello,

So I’ve been struggling to get an example going using Backbone Relational and Require.js.
Lack of documentation and simple examples on the web made it really difficult for me to wrap my head around the implementation.
Moreover, Require.js was having scoping issues. Anyway, it works now and I can finally leverage this fantastic Backbone plugin 🙂 .

A few things to keep in mind

1) Make sure you have the updated version of Underscore.js
2) Make sure you have the updated version of Backbone
3) Make sure you have the updated version of Backbone-Relational
4) Test your example on a web server! install xampp, wamp or whateverYouWant! web browser have security restrictions to directly ajax local files.

The example I have below works with 1 Cinema JSON file which has a collection of movie objects inside it.
Here’s the JSON

    {
        "cinemaID":"1",
        "name":"Cinema 1",
        "movies":[
            {
                "movieID":"1",
                "name":"Bag It"
            },
            {
                "movieID":"2",
                "name":"Lost Boy: The Next Chapter"

            },
            {
                "movieID":"3",
                "name":"To Live & Ride in L.A."

            }]
    }

Next comes the MovieModel.js This is a simple extension of the Backbone.RelationalModel

define([],function () {
       var MovieModel = Backbone.RelationalModel.extend({
            idAttribute: 'movieID'
        });
        return MovieModel;
    }
);

Now the CinemaModel.js. This is where the relation with MovieModel is specified. The Backbone Relational documentation
shows that the “relatedModel” attribute should be set to the Model object. The name of this model object is shown to
be in single quotes. I think scoping issues were happening here. The MovieModel for me was being passed by Require.js
using define up top. However, when I had “relatedModel”:”MovieModel”, it didn’t find the Model in scope. So the solution
was to remove the quotes and have it set like “relatedModel”:MovieModel. Since we’re getting a reference to the MovieModel
object using require.js define() anyway.

define(['models/MovieModel','collections/MoviesCollection'],function (MovieModelClass,MoviesCollection) {
        var CinemaModel = Backbone.RelationalModel.extend({
            idAttribute:'cinemaID',
            url:'scripts/data/cinemamodel.json',
            relations: [
                {
                    type: Backbone.HasMany,
                    key: "movies",
//Scoping issue happening here. The documentation for Backbone-Relational has this in quotes!
                    relatedModel:MovieModelClass, 
                    //TODO: Figure out what this attribute does!
                    includeInJSON:Backbone.Model.prototype.movieID,
                    reverseRelation:{
                        key:'inCinema',
                        includeInJSON:Backbone.Model.prototype.cinemaID
                    }
                }
            ]});

        return CinemaModel;
    }
);

Finally, the implementation:

define(['models/CinemaModel'], function (CinemaModel) {

    $(function () {
       init();
    });

    function init() {

        /*Instantiating the CinemaModel*/
       cinemaModel = new CinemaModel();
        cinemaModel.fetch({success:function (collection,response) {
            console.log("Woohooo!: Fetch Cinema Model!");
            console.log ("Relational Model : " + cinemaModel.get('movies').at(0).get('name'));
            console.log ("Reverse Relation : " + cinemaModel.get('movies').at(0).get('inCinema').get('name'));
        },
            error:function (collection, response) {
                console.log("Error: Fetch Cinema Collection!");
            }
        });



    }


});

That’s it!! It works :). Next! I’m going to try and throw collections into the mix and see how I can have a cinemaCollection
with each collection model holding multiple MovieModel objects.

Should be fun 🙂

Cheers!
SyntaxScrewer

May 1, 2012

iPad – Mobile Safari – Resizes High Resolution Images to fit the browser window size.

Filed under: iOS — geekymaira @ 5:32 pm
Tags: , , , , , , ,

Hey guys,

I ran into an issue with Mobile Safari and its quirky behavior which forces a re size of a high resolution image.
The issue occurs even when doing any of the following simple things.

1) Load up the image as the body background
2) Load up the image as a div background
3) Load up the image in an img tag in the body.

In all the above, if the image resolution > that the browser’s it resizes the image to fit in.
In cases of the div/img, it resizes the div/img containers which cause the background-image/src to size automatically.

I kept searching for solutions online and found other important information pertaining to iPad web development
in the Apple Docs.

Lot of useful information there. I STRONGLY recommend that everyone goes through it.

The parts relevant to this post were found here :
Optimizing Content for Ipad Development – Apple Docs

Anyway, coming quickly to the solution – it was pretty straightforward. I’ll explain what worked for the body and the div background images.

Ok so this is how we had the body setup first (which didn’t work)

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
}
</style></head>
<body></body>
</html>

The problem with the above is that the image does not load up in its original size. Safari Mobile scales it down.

The solution is to give the body a background-size in the CSS which equals the size of the image.

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
}
</style></head>
<body></body>
</html>

The following code creates issues for the background image on the div.

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
width:1934px;
height:1612px;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The issue with the above is the same – The background image resizes.
The problem here doesn’t get fixed by applying a background-size to the css.
You also need to set the widht and height to a 100% each!!

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The above fixes the div too…
But another problem arises… What if you don’t want the div to be a 100% and a 100% width? What if you want to show only a part of the background image?
Like in case you’re loading up or animating a spritesheet? How does all of that work then ?

Well, you take a container div which houses your image div. And on the container div set the desired size you want.
Everything then falls in place.

Here’s how :

<html>
<head>
<style>
#imgHolder{
width:320px;
height:320px;
}
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style>
<body>
<div id="imgHolder">
	<div id="img">
	</div>
</div>
</body>

Hope that helps!! I know its going to serve me as a reference next time I get stuck with iPad!

Cheers!

SyntaxScrewer

Blog at WordPress.com.