gpt4 book ai didi

javascript - 如何使用 Polymer 1.0 dom-bind 公开局部变量

转载 作者:行者123 更新时间:2023-11-29 21:45:45 25 4
gpt4 key购买 nike

我创建了一个 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 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com