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

【问题标题】：How to expose local variables with Polymer 1.0 dom-bind如何使用 Polymer 1.0 dom-bind 公开局部变量
【发布时间】：2015-07-07 12:23:54
【问题描述】：

我创建了一个聚合物元素，它需要一个画布 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>

编辑：我的元素

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

我的主要问题是如何处理 context="canvas.getContext('2d')" 之类的东西？现在 my-element 的 context 属性没有设置。

【问题讨论】：

嗨！ @FXG 谁是你问题中的上下文（context="canvas.getContext('2d')？我正在使用你的代码，我的 app.context 是 CanvasRenderingContext2D {}。不正确吗？
my-element.context 也是一样的 (CanvasRenderingContext2D)。
@horacioibrahim 是的，但是这个上下文没有作为我的“我的元素”的属性传递。我将编辑我的问题以使其更清楚。
Polymer 列出了以下可用的属性类型：Boolean, Date, Number, String, Array or Object。所以，我认为这不会像你目前所拥有的那样工作。也许Object 会起作用？
我找到了，这是我元素方面的问题。未反映对上下文属性的更改，因为使用它的属性是在就绪函数上创建的。我创建了一个观察者方法并在这里应用我的更改。它现在正在工作。

标签： javascript data-binding polymer web-component polymer-1.0

【解决方案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>

【讨论】：