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

How to expose local variables with Polymer 1.0 dom-bind

本文关键字：局部变量 dom-bind 何使用 Polymer      更新时间：2023-09-26

我创建了一个需要画布2d上下文作为属性工作的聚合物元素，我正试图从兄弟画布标签中获取它。

我看过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')"这样的东西?现在my-element的context属性还没有设置。

<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>
相关文章：