Question

我正在尝试使用Google的Material desingn。

下面有一个组件，其路径为epimss_design / lib / component / menu / main-menu-form.html; epimss_design是应用程序的名称。

  <!DOCTYPE html>

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

  <link rel="import" href="../../../../packages/core_elements/core_drawer_panel.html">
  <link rel="import" href="../../../../packages/core_elements/core_icon_button.html">
  <link rel="import" href="../../../../packages/core_elements/core_toolbar.html">

  <link rel="import" href="../../../../packages/paper_elements/roboto.html">
  <link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
  <link rel="import" href="../../../../packages/paper_elements/paper_icon_button.html">

  <polymer-element name="main-menu-form">

      <style>
        :host {
          position: absolute;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }

        #core_drawer_panel {
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 10px;
        }

        #section {
          box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
          background-color: rgb(250, 250, 250);
        }

        #section1 {
          height: 100%;
          box-sizing: border-box;
          background-color: rgb(221, 221, 221);
        }

        #core_toolbar {
          right: 0px;
          color: rgb(255, 255, 255);
          fill: rgb(255, 255, 255);
          background-color: rgb(79, 125, 201);
        }


    </style>

    <template>
      <core-drawer-panel id="core_drawer_panel">
        <section id="section" drawer></section>
        <section id="section1" main>
          <core-toolbar id="core_toolbar">
            <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
            <div id="div" flex>Toolbar</div>
          </core-toolbar>
        </section>
      </core-drawer-panel>

    </template>

    <script type="application/dart">

      import 'package:polymer/polymer.dart';
      import 'dart:html';

      //import 'package:epimss_polymer/.dart';


      @CustomTag( 'main-menu-form' )
      class MainMenuForm extends PolymerElement
      {

        MainMenuForm.created() : super.created();

        void menuAction()
        {
          print ( 'Menu tapped' );
        }
      }

    </script>
  </polymer-element>

entry_point epimss_design.html如下：

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ePIMSS</title>
      <!-- <script src="packages/web_components/platform.js"></script>
           not necessary anymore with Polymer >= 0.14.0 -->
      <script src="packages/web_components/dart_support.js"></script>

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

      <link rel='import' href='packages/epimss_design/component/menu/main-menu-form.html'>

      <script type="application/dart">
        export 'package:polymer/init.dart';

      </script>

      <!-- <script src="packages/browser/dart.js"></script> -->


      <link rel="stylesheet" href="epimss_design.css">
    </head>

    <body unresolved>
      <main-menu-form></main-menu-form>


  </body>
  </html>

当我运行应用程序时，我一直收到以下错误

     Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element':    
     '#packages/epimss_design/component/menu/menu' is not a valid selector. (http://127.0.0.1:8080/epimss_design.html:1509)
Exception caught during observer callback: Error: Failed to execute 'querySelector' on 'Element': '#packages/epimss_design/component/menu/menu' is not a valid selector.
    at Error (native)
    at core-iconset-svg.Polymer.iconById (http://127.0.0.1:8080/epimss_design.html:1509:59)
    at core-iconset-svg.Polymer.cloneIcon (http://127.0.0.1:8080/epimss_design.html:1513:25)
    at core-iconset-svg.Polymer.applyIcon (http://127.0.0.1:8080/epimss_design.html:1557:24)
    at core-icon.Polymer.updateIcon (http://127.0.0.1:8080/epimss_design.html:1461:17)
    at core-icon.g.invokeMethod (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:13320)
    at core-icon.g.notifyPropertyChanges (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:11606)
    at Object.Observer.report_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:12616)
    at Object.createObject.check_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:18105)
    at c (http://127.0.0.1:8080/packages/web_components/platform.js:12:5467) (http://127.0.0.1:8080/packages/web_components/platform.js:12)

异常中的最后一个菜单对我来说毫无意义。我不知道它来自哪里。我希望最后一个菜单是主菜单形式，即组件的名称。我希望对某人有意义。

由于

Answer 1

这似乎是由此错误引起的https://code.google.com/p/dart/issues/detail?id=19770

另见https://groups.google.com/a/dartlang.org/forum/#!topic/web/Jbiml0hFH40

变换器在如何处理src元素的img属性（core-icon）

中似乎有错误

<强>更新
这些属性需要特殊处理，因为在Polymer有机会评估绑定之前，浏览器会对它们进行评估。 Polymer提供的解决方案是绑定到属性_src和_img。

DOMException中无法解释的标识符

1 个答案: