1

私はxタグを利用しています。これが私が取り組んでいるコードです。これらの div ボックスの内容を、カスタム要素の属性値の値で設定する必要があります。これを行うことは可能ですか？設定してみましたが、「undefined is not a function」というエラーが出ました。

var template = xtag.createFragment(function(){/*
  <div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
*/});

xtag.register('x-navbar', {
  lifecycle: {
    created: function() {
      this.appendChild(template.cloneNode(true));
      this.getElementById("#box1").innerHTML = this.productName;
    },
  accessors: {
    productName: {
      attribute: {},
      get: function(){
        return this.getAttribute('productName') || "";
      },
      set: function(value){
        this.xtag.data.header.setAttribute('productName',value);
      }
    }
  }
});

<x-navbar productName="Box 1">hii</x-navbar>
4

2 に答える 2

1

セッターで productName を変更していないため、これをさらに単純化できます。

xtag.register('x-navbar', {
  content: function() {/*
  <div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
*/},
  accessors: {
    productName: {
      attribute: {},
      set: function (name) {
        this.querySelector('#box1').textContent = name;
      }
    }
  }
});

次のように使用します。

<x-navbar product-name="Testing 123">hii</x-navbar>

属性名は、 の破線バージョンでなければならないことに注意してproductNameくださいproduct-name。これは次のようにレンダリングされます。

hii
Testing 123

テンプレート<div>構造は、要素のコンテンツの後に追加されhiiます。

于 2016-02-18T23:57:23.967 に答える
0

属性バッキング アクセサーは次のように記述できます。属性を手動で設定する必要はありません。get 関数から値を返すように自分自身を更新するためです。

accessors: {
            productName: {
                attribute: {},
                get: function () { return this._productName; },
                set: function (value) { 
                     this._productName = value;
                     // MANUPLATE YOUR HTML IN HERE
                     this.getElementById("#box1").innerHTML = this.productName;
                }
            },
}
于 2015-11-28T17:48:46.810 に答える