Question

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

我想要做的是当我点击一个元素是：“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＆＃39; s 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

Answer 3

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

扩展每个html元素

3 个答案: