如何在Web組件中設置標籤的內部文本

我正在使用x-tags。這是我正在處理的代碼。我需要使用自定義元素屬性值的值來設置這些div框的內容。是否有可能做到這一點？我嘗試設置它，但我得到錯誤「未定義不是一個函數」。如何在Web組件中設置標籤的內部文本

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>

來源

2014-11-25 Ajinkya Pisal

檢查你的parens。你有沒有分配的變量。第二行創建不需要。您需要在productName設置器中設置該元素。 – 2014-11-25 15:03:33

您可以像這樣編寫支持訪問器的屬性。你不需要手動嘗試設置屬性。因爲它將自我更新爲從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-28 17:48:46

你甚至可以進一步簡化這一點，因爲你是不是在二傳手改變產品名稱：

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

模板元素的內容，hii後<div>結構被添加。

來源

2016-02-18 23:57:23 jpec

如何在Web組件中設置標籤的內部文本

回答

相關問題