Обработка нескольких х-тегов

Примечание. Этот вопрос основан на старой версии х-тега Mozilla.

В моем проекте я использую x-tag Mozilla. Я создал этот тег с именем 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);

Моя проблема: когда я вызываю метод getContent для идентификатора x-one, он печатает: source2. Как я могу предотвратить это поведение?

Источник

4 ответа

Решение

Решение этой проблемы - создать объект с помощью jsonurl. Спасибо Флориану Маргэйну, который привел меня к правильному решению.

Как это сделать:

(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);
Источник

Я бы посоветовал взять последнюю версию X-Tag - спецификация изменилась, поскольку она прошла через более поздние этапы процесса стандартизации, эта версия довольно старая. Действующий API для X-Tag будет совместим с окончательной спецификацией и теперь может использоваться во всех основных браузерах вплоть до 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(){ ... })
            }
        }
    }
});
Источник

Сделать jsonurl свойство объекта, а не переменная, общая для всех x-master.

var props = function() {
    var jsonurl;

    return { 
        onCreate: function() {
            jsonurl = this.getAttribute('data-src');
        },

        methods: {
            getContent: function() {
                $.getJSON(jsonurl, function(data) {
                    console.log(jsonurl);
                };
            }
        }
    };
};

xtag.register('x-master', props());
Источник

В этой части:

onCreate : function() {
jsonurl = this.getAttribute('data-src');

каждый раз, когда инициализируется x-master, jsonurl присваивается значение из текущего x-master. Вот почему вы всегда получаете data-src последнего элемента.

Источник
Другие вопросы по тегам