Polymer 1.6和Polymer-cli，可从自定义元素中访问应用程序属性

Question

Using the polymer-cli tool, and the shopping cart boilerplate as a starting point, I made a simple mock-up to illustrate the use case. 使用polymer-cli工具和购物车样板作为起点，我做了一个简单的模型来说明用例。

Assume your index.html file includes "test-app.html" and the matching tag 假设您的index.html文件包含“ test-app.html”和匹配的标记

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <title>My App</title>

  <link rel="shortcut icon" sizes="32x32" href="/images/app-icon-32.png">

  <meta name="theme-color" content="#fff">
  <link rel="manifest" href="/manifest.json">

  <script>

    // setup Polymer options
    window.Polymer = {lazyRegister: true, dom: 'shadow'};

    // load webcomponents polyfills
    (function() {
      if ('registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')) {
        // browser has web components
      } else {
        // polyfill web components
        var e = document.createElement('script');
        e.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
        document.head.appendChild(e);
      }
    })();

    // load pre-caching service worker
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');
      });
    }

  </script>

  <!-- <link rel="import" href="/src/bewi-app.html"> -->
  <link rel="import" href="/src/test-app.html">

  <style>

    body {
      margin: 0;
      font-family: 'Roboto', 'Noto', sans-serif;
      line-height: 1.5;
      min-height: 100vh;
      background-color: #eee;
    }

  </style>

</head>
<body>
  <span id="browser-sync-binding"></span>

  <test-app id="test"></test-app>

</body>
</html>

Now, assume test-app.html containing the following (again a mere simplified copy of my-app.html): 现在，假设test-app.html包含以下内容（同样是my-app.html的简化副本）：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="test-element.html">

<dom-module id="test-app">

  <template>

    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

        test-element is loaded bellow
        <test-element></test-element>
    <div>
    </div>
  </template>

  <script>

    Polymer({

      is: 'test-app',

      properties: {

        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },
        baseUrl: {
          type: String,
          value: '/'
        },
        siteUrl: {
          type: String,
          value: 'http://fqdn.local'
        }
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';
      },

      _pageChanged: function(page) {
        // load page import on demand.
        this.importHref(
          this.resolveUrl('my-' + page + '.html'), null, null, true);
      }

    });

  </script>

</dom-module>

Now, the test-element.html 现在，test-element.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="test-element">
  <template>
    <div> I am a test </div>
  </template>

  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'test-element',
      ready: function() {
        console.log('READY');
        console.log('find #test using document.querySelector', document.querySelector('#test')); // OK
        console.log('find #test .siteUrl using document.querySelector', document.querySelector('#test').siteUrl); // undefined
        console.log('find #test .siteUrl using Polymer.dom', Polymer.dom(document.querySelector('#test')).siteUrl); // undefined
        console.log('find #test .siteUrl using Polymer.dom().node', Polymer.dom(document.querySelector('#test')).node.siteUrl); // undefined
        console.log('find #test .siteUrl using Polymer.dom().properties', Polymer.dom(document.querySelector('#test')).node.properties); // {object} but, I'm guessing not the computed values of the properties

        // So, how may I access the #test app's "siteUrl" property from within a custom element?
      }
    });
  })();
  </script>
</dom-module>

So, the real question is, how may test-element access the property "siteUrl" in the main app? 因此，真正的问题是，测试元素如何在主应用程序中访问属性“ siteUrl”？ I'm planning to make this variable readOnly, and access it from other custom elements. 我打算将此变量设置为readOnly，并从其他自定义元素访问它。 I'ld prefer this approach VS passing the siteUrl as an attribute to the test-element element.. 我更喜欢这种方法VS将siteUrl作为属性传递给test-element元素。

What do you think? 你怎么看？

Answer 1

The right way to pass information through elements is using the Data Binding system , ie "passing the siteUrl as an attribute to the test-elemet element" 通过元素传递信息的正确方法是使用数据绑定系统，即“将siteUrl作为属性传递给test-elemet元素”

You'll accomplish the Read Only requirement surrounding the variable with square brackets, like this [[siteUrl]] as described in Property change notification and two-way binding . 您将用方括号完成变量周围的只读要求，例如[[siteUrl]] ，如属性更改通知和双向绑定中所述。

You can set a variable in a global environment as you said like 您可以像说的那样在全局环境中设置变量

<script>
  var myGlobalVar = 'is accessible in any element'

  Polymer({

    is: 'test-app',

    // ...

  });

</script>

and you can access it in every element. 您可以在每个元素中访问它。

BUT, global variables are not recommended as you may know. 但是，如您所知，不建议使用全局变量。 References about why in the links below. 以下链接中有关为什么的参考。

Polymer 1.6和Polymer-cli，可从自定义元素中访问应用程序属性

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-05 14:45:41

Polymer 1.6和Polymer-cli，可从自定义元素中访问应用程序属性

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-05 14:45:41

解决方案1
1 已采纳 2016-07-05 14:45:41