Handling multiple x-tags

Question

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?

Answer 1

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);