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

使用poly -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，并从其他自定义元素访问它。比起将siteUrl作为属性传递给test-element元素，我更喜欢这种方法。

你觉得怎么样?

通过元素传递信息的正确方法是使用数据绑定系统，即:"将siteUrl作为属性传递给test- element元素"

您将完成用方括号包围变量的只读要求，就像属性更改通知和双向绑定中描述的[[siteUrl]]。

您可以在全局环境中设置变量，例如

<script>
  var myGlobalVar = 'is accessible in any element'
  Polymer({
    is: 'test-app',
    // ...
  });
</script>

，你可以在每个元素中访问它。

但是，全局变量不推荐使用，你可能知道。

全局变量是坏的
为什么全局变量被认为是不好的做法?
我听说全局变量不好，我应该使用什么替代解决方案?

相关内容

最新更新

热门标签：