Handling multiple x-tags

Note: This question is based on an old version of Mozilla x-tag.

In my project I'm using Mozilla x-tag. I created this tag called x-master. I got two of those tags in my index.html:

<div id="page-one" data-role="page">
<x-master id="x-one" data-src="source1"></x-master>
</div>
<div id="page-two" data-role="page">
<x-master id="x-two" data-src="source2"></x-master>
</div>

xtag component looks like this:

(function(window, document, undefined) {
var jsonurl;

xtag.register('x-master', {
onCreate : function() {
jsonurl = this.getAttribute('data-src');
},
methods : {
getContent : function(){
$.getJSON(jsonurl, function(data){ console.log(jsonurl); };
}
}
})(this, this.document);

My problem: When I call the method getContent for id x-one it prints: source2. How can I prevent this behaviour?

The solution for this to work is to make an object with the jsonurl. Thanks to Florian Margaine who got me to this right solution.

How to do this:

(function(window, document, undefined) { 
function props() {
    this.jsonurl; 
}

xtag.register('x-master', {
    onCreate : function() {
       this.props = new props();
       this.props.jsonurl = this.getAttribute('data-src');
},
    methods : {
        getContent : function(){
             $.getJSON(this.props.jsonurl, function(data){ console.log(jsonurl); };
        }
}
})(this, this.document);