2015-05-12 81 views
2

在X-num.html更新本地DOM將不會反映黑幕DOM

<link rel="import" href="../polymer/polymer.html"> 
    <dom-module id="x-num"> 
     <style></style> 
     <template> 
      <span id="number"></span> 
     </template> 
    </dom-module> 
    <script> 
     Polymer({ 
      is: "x-num", 
      properties: { 
       type: String, 
       value: 'normal' 
      }, 
      attached: function() { 
       var contentNode = Polymer.dom(this).childNodes[0]; 
       var number = Number(contentNode.textContent); 
       var result = ""; 
       switch(this.type){ 
        case "simplified": 
         if(number > 1000) 
          result = number/1000 + "K+"; 
         else 
          result = number; 
         break; 
        case "comma": 
         result = number.toLocaleString('en-IN'); 
         break; 
        case "normal": 
        default: 
         result = number; 
         break; 
       } 
       this.$.number.textContent = result; 
      }, 
      detached: function(){ 
       console.log("detached"); 
      }, 
      attributeChanged: function(name, type){ 
       console.log("attribute Changed: "+name); 
      } 
     }); 
    </script> 

index.html中

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script>Polymer = {dom: 'shadow'};</script> 
    <title>Testing Polymer Element</title> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="x-num.html"> 
</head> 
<body> 
    <x-num>3546</x-num> 
    <br/> 
    <x-num type="comma">3546</x-num> 
    <br/> 
    <x-num type="simplified">3546</x-num> 
</body> 
</html> 

當我嘗試做document.querySelector("x-num").innerHTML = "4000",它仍然顯示3546,我會喜歡問內容是否有改變的結果

回答

1

如果我把這個setNumber函數添加到x-num.html

<script> 
    Polymer({ 
    ..., 
    setNumber: function(number) { 
     this.$.number.textContent = number; 
    } 
    }); 

我可以index.html中改變每一行到 「4000」 與此:

... 
    <script> 
    var list = document.getElementsByTagName('x-num'); 
    for (i = 0; i < list.length; i++) 
     list[i].setNumber(4000); 
    </script> 
</body> 

我使用聚合物0.9 RC.1