javascript - 处理多个 x-tags

Question

注意:这个问题是基于旧版本的 Mozilla x-tag。

在我的项目中，我使用 Mozilla x-tag .我创建了这个名为 x-master 的标签。我的 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 组件如下所示:

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

我的问题:当我为 id x-one 调用方法 getContent 时，它会打印:source2。我怎样才能防止这种行为？

Answer 1

我建议获取最新版本的 X-Tag - 规范在标准化过程的后期阶段发生了变化，那个版本已经很旧了。现在用于 X-Tag 的 API 将与最终规范兼容，并且现在可以在所有主流浏览器中使用，一直到 IE9:http://x-tags.org/

这是使用 X-Tag 的内置功能优化后的代码:

xtag.register('x-master', {
    accessors: {
        src: {
            attribute: {},
            set: function(src){
                // Using the attribute <--> accessor auto-linkage feature of 
                // X-Tag, both your created lifecycle event and getContent method
                // become unnecessary. If src is present on creation, or changed
                // at any time, your setter is automatically executed. Simply set
                // the src property/attribute and it will do your AJAX call.
                $.getJSON(src, function(){ ... })
            }
        }
    }
});