Question

在x-num.html

中

  <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，我想问一下，当内容发生变化时是否有结果改变

Answer 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>

我正在使用Polymer 0.9-rc.1

更新本地dom不会反映阴暗的dom

1 个答案: