Question

我的应用中的CoreCollapse存在问题。我使用的是Core元素。我编写了1小时的代码。但现在停止了工作。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vinoteka</title>
        <script async src="packages/browser/dart.js"></script>
        <link rel="stylesheet" href="vinoteka.css">
        <link rel="import" href="packages/paper_elements/roboto.html">
        <link rel="import" href="packages/polymer/polymer.html">
        <link rel="import" href="packages/paper_elements/paper_button.html">
        <link rel="import" href="packages/paper_elements/paper_shadow.html">
        <link rel="import" href="packages/paper_elements/paper_tab.html">
        <link rel="import" href="packages/paper_elements/paper_tabs.html">
        <link rel="import" href="packages/paper_elements/paper_menu_button.html">
        <link rel="import" href="packages/paper_elements/paper_icon_button.html">
        <link rel="import" href="packages/paper_elements/paper_item.html">
        <link rel="import" href="packages/paper_elements/paper_checkbox.html">
        <link rel="import" href="packages/paper_elements/paper_dialog.html">
        <link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
        <link rel="import" href="packages/paper_elements/paper_toast.html">

        <link rel="import" href="packages/core_elements/core_collapse.html">
        <link rel="import" href="packages/core_elements/core_list_dart.html">
        <link rel="import" href="packages/core_elements/core_icon.html">
        <link rel="import" href="packages/core_elements/core_icons.html">
        <link rel="import" href="packages/core_elements/core_toolbar.html">
        <link rel="import" href="packages/core_elements/core_menu.html">
        <link rel="import" href="packages/core_elements/core_pages.html">
        <script async type="application/dart" src="vinoteka.dart"></script>
    </head>

    <body unresolved>

            <paper-tabs selected="1" flex noink>
                <paper-tab id="stoly_tab">
                    <core-icon icon="select-all"></core-icon>Stoly</paper-tab>
                <paper-tab id="nakup_tab">
                    <core-icon icon="shopping-cart"></core-icon>Nákup</paper-tab>
                <paper-tab id="trzba_tab">
                    <core-icon icon="account-balance"></core-icon>Tržba</paper-tab>
            </paper-tabs>

          <core-pages id="first" selected="1">
     <div> <div id="stoly">
            <table>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 1</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 2</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 3</paper-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <paper-item>
                            <core-icon icon="select-all"></core-icon>Stůl 4</paper-item>
                    </td>
                </tr>
            </table>
        </div></div>
    <div>
    <core-collapse id="collapse1" >
            <paper-item class="black" id="toggleCollapse" horizontal center-justified layout>
                <core-icon icon="shopping-basket"></core-icon>Nový nákup</paper-item>
        </core-collapse>
        <core-collapse id="collapse" >
            <table id="nakup_table">
                <tr>
                    <td colspan="2">

                            <paper-item class="vino" flex raised>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>
                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                    <td colspan="2">

                            <paper-item class="vino" flex>
                                <core-icon icon="file-map"></core-icon>0.25l</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5
                                </paper-item>
                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>1.5l</paper-item>
                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
                <tr>
                    <td>

                            <paper-item class="vino" flex>2</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                    <td>

                            <paper-item class="vino" flex>2l</paper-item>

                    </td>
                    <td>

                            <paper-item class="vino" flex>Bez</paper-item>

                    </td>

                </tr>
            </table>


                <paper-item class="black" id="more" label="Více" horizontal center-justified layout></paper-item>



        </core-collapse>

        </div>

    <div>
        None





    </div>
  </core-pages>



        <paper-dialog heading="Dialog" transition="paper-dialog-transition-center" backdrop=true autoCloseDisabled=true>
            <p>Lorem ipsum dolor sit amet, doming noster at quo, nostrud lucilius rationibus ea duo. Vim no mucius dolores. No bonorum voluptatum vis, has iudicabit consectetuer ne. Nullam sensibus vim id, et quo graeci perpetua.</p>
            <p>Id qui scripta laboramus dissentiet, verterem partiendo vim at. Stet dissentiet ut mei. Iriure facilis eloquentiam pro eu, nec an esse inciderint. In meliore abhorreant sea. Eros nostro ocurreret at nec. Cu per regione persecuti.</p>
            <p>Lorem ipsum dolor sit amet, doming noster at quo, nostrud lucilius rationibus ea duo. Vim no mucius dolores. No bonorum voluptatum vis, has iudicabit consectetuer ne. Nullam sensibus vim id, et quo graeci perpetua.</p>
            <paper-button label="More Info..." dismissive></paper-button>

Nákup Dokončen <paper-button label="Decline" affirmative></paper-button>
            <paper-button label="Accept" affirmative autofocus></paper-button>
        </paper-dialog>

        <paper-toast id="toast1" text="Nákup Dokončen"></paper-toast>
        <div id="submit_bottom" class="hide"><paper-item class="lightBlue" id="submit" label="Dokončit objednávku" horizontal center-justified layout></paper-item></div>

            </body>

</html>

pubspec.yaml

dependencies:   
    browser: any   
    core_elements: any   
    paper_elements: any   
    polymer: any 
transformers:
    - polymer:
        entry_points:
          - web/vinoteka.html

和dart

    import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_dialog.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_collapse.dart';
import 'package:core_elements/core_dropdown.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:core_elements/core_pages.dart';
main () {
  initPolymer().run(() {
    (querySelector('#collapse1') as CoreCollapse).toggle();
    querySelector('#toggleCollapse').onClick.listen(
        (_) => nakup_menu());
    querySelector('#submit').onClick.listen(
        (_) => nakup_konec());
    querySelector('#more').onClick.listen(
        (_) => dalsi());
    querySelector('#stoly_tab').onClick.listen(
        (_) => stoly()); 
    querySelector('#nakup_tab').onClick.listen(
        (_) => nakup()); 
    querySelector('#trzba_tab').onClick.listen(
        (_) => trzba()); 

  });
}



void nakup_menu() {
  (querySelector('#collapse') as CoreCollapse).toggle();
  (querySelector('#collapse1') as CoreCollapse).toggle();
  (querySelector('#submit_bottom') as DivElement).classes.remove("hide");
}
void nakup_konec() {
  (querySelector('#collapse') as CoreCollapse).toggle();
  (querySelector('#collapse1') as CoreCollapse).toggle();
  (querySelector('#toast1') as PaperToast).show();
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");
}
void dalsi() {
  (querySelector('paper-dialog') as PaperDialog).toggle();
  (querySelector('#more') as PaperItem).classes.add("hide"); 
}

void stoly() {
  (querySelector('#first') as CorePages).selected = 0;
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");  
}
void nakup() {
  (querySelector('#first') as CorePages).selected = 1;
}
void trzba() {
  (querySelector('#first') as CorePages).selected = 2;
  (querySelector('#submit_bottom') as DivElement).classes.add("hide");
}

，错误为 enter image description here 如果没有启动，则命令(querySelector('#collapse1') as CoreCollapse).toggle();有效。

请求帮助。

Answer 1

看起来像是时间问题这应该有用。

main () {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {
      (querySelector('#collapse1') as CoreCollapse).toggle();
      querySelector('#toggleCollapse').onClick.listen(
          (_) => nakup_menu());
      querySelector('#submit').onClick.listen(
          (_) => nakup_konec());
      querySelector('#more').onClick.listen(
          (_) => dalsi());
      querySelector('#stoly_tab').onClick.listen(
          (_) => stoly()); 
      querySelector('#nakup_tab').onClick.listen(
          (_) => nakup()); 
      querySelector('#trzba_tab').onClick.listen(
          (_) => trzba()); 
    });
  }));
}

另见how to implement a main function in polymer apps

Dart核心元素核心崩溃

1 个答案: