javascript - 更新本地dom不会反映 shady dom

  显示原文与译文双语对照的内容

在 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,我想询问是否仍然会在内容更改时改变结果。

时间: 原作者:

如果我将这里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

原作者:
...