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

Question

我创建了一个需要 canvas 二维上下文作为属性才能工作的聚合物元素，我正试图从兄弟 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>

编辑：MyElement

Polymer({
        is : 'my-element',
        properties: {
            type: {
                type: String,
                value: 'Text'
            },
            context: {
                type: CanvasRenderingContext2D
            }
        }
    });

我的主要问题是如何实现 context="canvas.getContext('2d')" 之类的东西？现在我的元素的上下文属性没有设置。

Answer 1

<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>

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

How to expose local variables with Polymer 1.0 dom-bind

javascript

data-binding

web-component

polymer

polymer-1.0