- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在测试 Polymer 来开发一个我想在 html 中多次重用的组件(见下图)。我开发了以下元素:
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="js/fabric.js"></script>
<dom-module id="tooth-element">
<template>
<style>
#labelWrapper {
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
font-weight: bold;
height: 40PX;
}
</style>
<div id="toothWrapper">
<div id="upperRootWrapper">
<canvas id="upperRoot" />
</div>
<div>
<canvas id="tooth" />
</div>
<div id="lowerRootWrapper">
<canvas id="lowerRoot" />
</div>
<div id="labelWrapper">
<p>{{toothLabel}}</p>
</div>
</div>
</template>
<script>
var TOOTH_SIZE = 50;
var TOOTH_GAP = 5;
var UPPERROOTID = 'upperRoot';
var LOWERROOTID = 'lowerRoot';
var TOOTHID = 'tooth';
Polymer({
is: "tooth-element",
properties: {
// declare the owner property
showUpperRoot: {
type: Boolean,
value: true
},
showLowerRoot: {
type: Boolean,
value: true
},
toothLabel: {
type: String,
value: 30
}
},
ready: function() {
drawUpperRoot(this.showUpperRoot);
drawTooth();
drawLowerRoot(this.showLowerRoot);
initLabel(this.toothLabel);
}
});
function initLabel (label) {
document.getElementById("labelWrapper").style.width = new String(3*TOOTH_SIZE)+'px';
}
function drawUpperRoot (isVisible) {
var canvas = new fabric.Canvas(UPPERROOTID);
if (isVisible) {
canvas.setHeight(TOOTH_SIZE+TOOTH_GAP);
canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP);
canvas.renderAll();
canvas.add(drawFace(1));
} else {
document.getElementById("upperRootWrapper").style.display = "none";
}
}
function drawTooth () {
var canvas = new fabric.Canvas(TOOTHID);
canvas.setHeight(TOOTH_SIZE*3+TOOTH_GAP*2);
canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP*2);
canvas.renderAll();
canvas.add(drawFace(2));
canvas.add(drawFace(3));
canvas.add(drawFace(4));
canvas.add(drawFace(5));
canvas.add(drawFace(6));
//canvas.add(drawFace(7));
}
function drawLowerRoot (isVisible) {
var canvas = new fabric.Canvas(LOWERROOTID);
if (isVisible) {
canvas.setHeight(TOOTH_SIZE+TOOTH_GAP*2);
canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP*2);
canvas.renderAll();
canvas.add(drawFace(7));
} else {
document.getElementById("lowerRootWrapper").style.display = "none";;
}
}
function drawFace(face) {
var coordinates;
switch (face) {
case 1:
coordinates = getFace1Coordinates();
break;
case 2:
coordinates = getFace2Coordinates();
break;
case 3:
coordinates = getFace3Coordinates();
break;
case 4:
coordinates = getFace4Coordinates();
break;
case 5:
coordinates = getFace5Coordinates();
break
case 6:
coordinates = getFace6Coordinates();
break;
case 7:
coordinates = getFace7Coordinates();
break;
default:
coorddinates = null;
}
face = new fabric.Polygon(coordinates, {
fill: '#E1E1E1',
selectable: false,
stroke: 'green'
});
face.on('mousedown', function () {
if (face.fill == '#E1E1E1') {
face.fill = '#878787';
} else {
face.fill = '#E1E1E1';
}
});
return face;
}
function getFace1Coordinates() {
return [{x: TOOTH_SIZE, y: 0}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: 0}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE}, {x: 0, y: TOOTH_SIZE}];
}
function getFace2Coordinates() {
return [{x: 0, y: TOOTH_GAP}, {x: TOOTH_SIZE, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: 0, y: TOOTH_SIZE*3}];
}
function getFace3Coordinates() {
return [{x: 0, y: 0}, {x: TOOTH_SIZE, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE}, {x: TOOTH_SIZE*3, y: 0}];
}
function getFace4Coordinates() {
return [{x: TOOTH_SIZE*3+TOOTH_GAP, y: 0}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE*3}];
}
function getFace5Coordinates() {
return [{x: 0, y: TOOTH_SIZE*3+TOOTH_GAP}, {x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE*3+TOOTH_GAP}];
}
function getFace6Coordinates() {
return [{x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE*2}, {x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE*2}];
}
function getFace7Coordinates() {
return [{x: 0, y: 0}, {x: TOOTH_SIZE, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE}, {x: TOOTH_SIZE*3, y: 0}];
}
</script>
</dom-module>
我正在尝试将其导入到 index.html 文件中,如下所示:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="tooth-element.html">
</head>
<body>
<div id="line1">
<tooth-element></tooth-element>
<tooth-element></tooth-element>
</div>
</body>
</html>
当我在 div line1 中放置两个齿元素时,就会出现问题。第二个元素永远不会显示,因为永远不会调用它的就绪函数。我不知道到底应该做什么才能解决这个问题。任何帮助将不胜感激
我想在 html 中重复的组件布局如下所示(我得到第一个 dentry 元素的图像,但没有得到第二个 dentry 元素的图像):
(解决方案)我没有正确使用 DOM(正如 Neil John Ramal 所解释的)。根据 Glenn 和 Neil 使用 Poly.dom API 的建议,我能够获得我想要的行为
最佳答案
在处理本地 DOM 时,请尽可能避免使用常规 DOM API(即 document.getElementById
、document.querySelector
等)。请改用Polymer.dom
。请注意,当您将 Polymer 设置为使用 Shadow DOM 而不是 Shady DOM 时,您的代码可能会失败,因为常规 DOM 访问器无法穿透 Shadow DOM(封装是其功能之一,Shady DOM 试图近似)。
代码中的问题之一是生成的元素与某些全局对象紧密耦合(例如 drawUpperRoot
)。这本质上破坏了您的元素封装,因为此代码也将被该元素的其他实例使用,因此您基本上使它们依赖于全局范围,而不是使用它们自己的范围。
还有这段代码:
function initLabel (label) {
document.getElementById("labelWrapper").style.width = new String(3*TOOTH_SIZE)+'px';
}
意味着当您创建两个tooth-element
时,第二个元素基本上会引用第一个元素的labelWrapper
而不是它自己的。
https://www.polymer-project.org/1.0/docs/devguide/local-dom.html
关于javascript - polymer 就绪函数仅调用一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33967554/
嗨,这是我在这里的第一个问题,所以如果由于某种原因不遵守规则,结果是重复的或其他什么,请友好地告诉我(并不是说我首先会失去任何声誉) 无论如何,关于 Java 提供的此类 StringReader,我
我继承了这段代码,它似乎不是最优的,而且可能不正确,因为它在窗口和文档对象上添加了事件监听器。但是,除黑莓5.0外,它都可以正常工作。有人可以解释一下所有这些设置是否正确,或者是否有任何建议可以使其更
我被要求在第三方网站上执行维护,我可以编辑 JavaScript,但不能编辑后端代码。该站点使用一个插件,可以在 jQuery.ready 调用中设置各种样式和事件。我想停止它而不引起错误。我可以在模
在下面的代码片段中: Get Started! $(document).ready(function() { $('#indexGet
我有一个包含多个 html 文件的 phonegap 应用程序,对于每个 html 文件,我都有 js.file。在每个 js 文件中,我都添加了一个 eventListener,如下所示: func
您好,我正在尝试创建一个书签,它会打开一个网页,在该网页上找到一个下载链接,然后关闭该网页。除非有更好的方法,否则我将打开页面,调用 ready(我认为这是无效的部分),然后搜索下载链接。导入jQue
关于我的问题:Validate dynamically added control 我们是否应该始终在 javascript 上使用 ready 函数? 最佳答案 一个人应该只有在保证这样的操作有效并
以下两种情况给我相同的行为。但是技术上有什么区别? (我把下面的代码放在正文中脚本标签的最后一部分。) $(document).ready(function() { $('.collapse').
我的程序使用共享内存作为数据存储。此数据必须可供任何正在运行的应用程序使用,并且必须快速获取此数据。但是一些应用程序可以运行在不同的 NUMA 节点上,并且它们的数据访问非常昂贵。每个 NUMA 节点
我有一个 控制台 .net 核心中的应用程序。 如何实现 Kubernetes 就绪/活跃度探测? 我的应用程序循环处理rabbitmq 消息,并且不监听任何http 端口。 最佳答案 对于这种情况,
在嵌入式系统上使用ALSA捕获时,我仍然遇到问题。 使用snddevices脚本后,我现在可以从库中打开设备。但是在每次调用大约10秒钟后,应用程序在Input/output error调用上返回错误
我想知道如何在 Facebook 应用程序的 FBJS 中使用 $(document).ready 或类似的东西。我尝试了 $(document).ready 但它不起作用。我也找不到任何相关文件..
我在 $('document').ready 中定义了一个函数。 $('document').ready(function() { function visit(url) { $.ajax
下面是一个简单的测试用例来演示我正在尝试做的事情: Test $(document).ready(function() { $(":target").css('color', 'r
使用 ember cli v0.1.4、ember 1.8.1 和 cordova 3.7,我正在使用初始化程序等待设备准备就绪; var CordovaInitializer = { name:
我正在研究 jQuery 最佳实践并找到了 this文章 by Greg Franko 通常,我会: $("document").ready(function() { // The DOM i
这个问题已经有答案了: What is the scope of variables in JavaScript? (27 个回答) 已关闭 5 年前。 我想在 $(document).ready(x
我成功地使用 gce ingress 使用 GKE 创建了一个集群。但是 Ingress 需要很长时间才能检测到服务是否就绪(我已经设置了 livenessProbe 和 readinessProbe
我不确定我在这里问的问题是否正确,但基本上我是用ajax请求插入html: // data-active_chart if ($("#charts").attr("data-active_chart"
我正在使用 Foundation CSS 框架,它在页脚中加载 jQuery。这不是非典型做法,也是许多人推荐的做法。但是,我需要在页面中编写脚本。使用 document ready 应该可以解决问题
我是一名优秀的程序员,十分优秀!