1

is:"ajax-pop"x-tag を使用して、属性を配置したすべての 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

型拡張は要素ごとに定義する必要があります。1 つのカスタム要素で複数の標準要素を拡張することはできません。各カスタム要素は、再利用できない独自のプロトタイプを所有しています。

ボタンを拡張したい場合 (例えば)、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 に答える