我创建了一个 polymer 元素，需要 Canvas 2d 上下文作为属性才能工作，并且我正在尝试从同级 Canvas 标签中获取它。
我见过https://www.polymer-project.org/1.0/docs/devguide/templates.html ，但它没有回答我的问题。
这是我现在所做的:
<body>
<template id="app" is="dom-bind">
<my-element id="renderer" context="{{ context }}"></my-element>
<canvas id="rendering-canvas"></canvas>
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app');
app.addEventListener('template-bound', function () {
console.log('Our app is ready to rock!');
});
window.addEventListener('WebComponentsReady', function () {
document.querySelector('body').removeAttribute('unresolved');
var renderer = document.querySelector('my-element[id=renderer]'),
canvas = document.querySelector('canvas[id=rendering-canvas]');
app.context = canvas.getContext('2d');
});
})(document);
</script>
</body>
编辑:我的元素
Polymer({
is : 'my-element',
properties: {
type: {
type: String,
value: 'Text'
},
context: {
type: CanvasRenderingContext2D
}
}
});
我的主要问题是如何处理类似 context="canvas.getContext('2d')" 的内容？现在 my-element 的上下文属性尚未设置。
最佳答案
<my-element id="renderer"></my-element>
<canvas id="rendering-canvas"></canvas>
<script>
(function (document) {
'use strict';
window.addEventListener('WebComponentsReady', function () {
document.querySelector('body').removeAttribute('unresolved');
var renderer = document.getElementById('renderer'),
canvas = document.getElementById('rendering-canvas');
renderer.context = canvas.getContext('2d');
});
})(document);
</script>
关于javascript - 如何使用 Polymer 1.0 dom-bind 公开局部变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31268478/