1

我正在尝试使用 Google 的 Material 设计。

我在下面有一个组件，其路径是 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)

异常中的最后一个菜单对我来说毫无意义。我不知道它是从哪里来的。我希望最后一个菜单是 main-menu-form，即组件的名称。我希望这对某人有意义。

谢谢

4

1 回答 1

0

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

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

转换器在处理元素src属性的方式上似乎有错误（在）imgcore-icon

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

于 2014-07-11T17:03:25.940 回答