更新本地dom不会反映阴暗的dom
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更新本地dom不会反映阴暗的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
以上是关于更新本地dom不会反映阴暗的dom的主要内容，如果未能解决你的问题，请参考以下文章
聚合物纸 - 对话框 - 在阴暗的dom中将大小设置为完整视口？此外，这篇旧文章是否适用于阴暗的dom？