Polymer 1.6和Polymer-cli，可從自定義元素中訪問應用程序屬性

Question

使用polymer-cli工具和購物車樣板作為起點，我做了一個簡單的模型來說明用例。

假設您的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>

現在，假設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>

現在，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>

因此，真正的問題是，測試元素如何在主應用程序中訪問屬性“ siteUrl”？ 我打算將此變量設置為readOnly，並從其他自定義元素訪問它。 我更喜歡這種方法VS將siteUrl作為屬性傳遞給test-element元素。

你怎么看？

Answer 1

通過元素傳遞信息的正確方法是使用數據綁定系統，即“將siteUrl作為屬性傳遞給test-elemet元素”

您將用方括號完成變量周圍的只讀要求，例如[[siteUrl]] ，如屬性更改通知和雙向綁定中所述。

您可以像說的那樣在全局環境中設置變量

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

  Polymer({

    is: 'test-app',

    // ...

  });

</script>

您可以在每個元素中訪問它。

但是，如您所知，不建議使用全局變量。 以下鏈接中有關為什么的參考。

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