1

使用 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 () { }
    }
});
4

3 回答 3

2

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

如果你想扩展一个按钮（例如），你必须用 JavaScript 编写：

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

并且，在 HTML 页面中：

<button is="ajax-pop">
...
于 2015-12-11T08:37:59.877 回答
1

您可以使用 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

于 2016-01-28T22:51:33.677 回答
0

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

于 2015-12-10T16:02:01.493 回答