BackBone image chargement

Salut tout le monde débutant avec BackBone je rencontre un petit soucis.

Je m'explique je cherche à récupérer la taille de mon image. Pour cela j'ai fais.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="js/libs/recadrage/Recadrage.js" ></script>
<script>
(function($){
	$(document).ready(function(){
		//init du plugin
		jqRecadre = new Recadrage({
			template: "#mediaRetaille",
			src: "img/img1.jpg"
		});
		//init de la vu du crop
		viewCrop = new Recadrage.CropView({
			model:jqRecadre,
			templateId: "#crop_content"
		});
		viewCrop.render();			
	});
})(jQuery);

Mon code du côté de recadre.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Recadrage = Backbone.Model.extend({
	defaults : {
		src: "default",
		original_width: '10',
		original_height: '10'
	},
	//setter
	setWidth: function(p) {
		trace (":: recadrage :: set Width");
		this.set({"original_width":p});
	},
	setHeight: function(p) {
		trace (":: recadrage :: set Width");
		this.set({"original_height":p});
	},
	setSRC: function(p){
		trace(":: recadreage :: set SRC");
		this.set({"src":p});
	},
	initialize:function() {
		trace("::init recadrage::");
	}
});
/**
	vu crop
**/
Recadrage.CropView = Backbone.View.extend({
	initialize:function(params) {
		this.templateId=params.templateId;
		this.model = params.model;
 
		//def template
		trace("-> init vu crop");
		if($(this.templateId).length>0){
			this.template = _.template( $(this.templateId+"_template").html() );
		}else{
			trace("!! template non trouvé");
		}
		//on changement de la donné
		_.bindAll(this, 'render');
		this.model.bind('change:src', this.render);
	},
	render:function() {
		trace("-> Render vu crop");
		var rendered = this.template({ src:this.model.get("src") });
 
		$(this.templateId).html(rendered);
		this.model.setHeight($(this.templateId+" img").height());
		this.model.setWidth($(this.templateId+" img").width());
 
		return this;
	}
});

Ce que je ne comprend pas c'est que lors de l'initialisation la taille est de 0.
Mais lorsque je change la source de l'image par une autre image j'ai toujours 0 puis si je remet en source de l'image la première la j'obtient ça taille et pareille pour la 2e.

Je pense donc que j'ai un problème de chargement d'image. Es-ce du que dans mon code HTML je charge l'image comme ceci puisse aussi posez problème?

Code:

1
2
3
<script type=”text/template” id="crop_content_template">
<img style="display:block;" id="target" alt="[Jcrop]" src="<%= src %>" />
</script>

Merci d'avance :)