扩展每个html元素

Question

使用x-tag，我试图找到一种方法来扩展我放入is:"ajax-pop"属性的每个html元素。

我想要做的是，当我单击一个带有is:" 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

类型扩展必须逐个元素定义。单个自定义元素不能扩展多个标准元素。因为，每个自定义元素都拥有自己的原型，不能重用。

如果你想扩展一个按钮(例如)，你必须用JavaScript写：

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

并且，在HTML页面中：

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

Answer 2

您可以使用x-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));
});

下面是一个代码示例：http://codepen.io/jpecor-pmi/pen/Vexqyg

Answer 3

我相信您使用x-tag的方式是错误的。X-tag旨在用于实现全新的标记；您要做的只是修改不同的预先存在的DOM元素。这可以很容易地在纯javascript中完成，或者在jquery中通过为每个需要的元素分配一个共享类来更容易地完成。