Расширение каждого элемента html

Question

С тегом x Я пытаюсь найти способ расширения каждого элемента html, который я положил атрибут is:"ajax-pop".

Что я хочу сделать, когда я нажимаю элемент с атрибутом «ajax-pop», я буду выполнять динамические нагрузки ajax. Для меня будет хорошей отправной точкой для разработки системы управления.

Я знаю, что могу сделать это с некоторыми различными способами, но мне интересно, есть ли способ сделать это, как таким образом расширяет: «каждый родной HTML элемент»

xtag.register('ajax-pop', { 

    extends: 'WHAT SHOULD I WRITE HERE???', 

    lifecycle: { 
     created: function() {     
     }, 
     inserted: function() {     
     }, 
     removed: function() { }, 
     attributeChanged: function() { } 
    }, 
    methods: { 
     someMethod: function() { } 
    }, 
    accessors: { 
     popUrp: { 
      attribute: { 
       name: "pop-url" 
      } 
     }, 
    }, 
    events: { 
     tap: function() { }, 
     focus: function() { } 
    } 
}); 

Answer 1

Я считаю, что вы собираетесь об использовании x-tag неправильным способом. X-tag предназначен для использования полностью новых тегов; то, что вы пытаетесь сделать, это просто изменить различные ранее существовавшие элементы DOM. Это можно легко сделать в чистом javascript или более легко в jquery, назначив каждому желаемому элементу общий класс.

Answer 2

Расширения типа должны определяться по элементам. Один пользовательский элемент не может распространять несколько стандартных элементов. Для каждого пользовательского элемента принадлежит собственный прототип, который нельзя использовать повторно.

Если вы хотите продлить кнопки (например), вы должны написать в JavaScript:

xtag.register('ajax-pop', { 
    extends: 'button', 
... 

И, на странице HTML:

<button is="ajax-pop"> 
... 

Answer 3

Вы можете сделать это с помощью х -tag в delegate псевдо, и путем добавления атрибута data- к элементам вы хотите, чтобы это поведение:

<article data-pop="/path/to/content.html"></article>

И ваш JavaScript будет что-то вроде этого:

xtag.addEvent(document.body, 'tap:delegate([data-pop])', function (e) { 
    var uri = this.getAttribute('data-pop'); 

    $.get(uri).done(function (res) { 
    this.innerHTML = res; 
    }.bind(this)); 
}); 

Вот codepen пример: http://codepen.io/jpecor-pmi/pen/Vexqyg