Geek Answers Handbook

The right way to create a library of web component components for polymers?

I am trying to create a library of web components using a dart and a polymer, but I cannot force data to be bound to my components.

I made a test application and a library. The test application defines a simple core component:

<!-- import polymer-element definition -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/MyLib/main_app.html">

<polymer-element name="my-launcher">
  <template>
    <style>

    </style>

 <my-main-app></my-main-app>

</template>
 <script type="application/dart" src="launcher.dart"></script>
</polymer-element>

This component imports and uses my-main-app, defined in my library:

<!-- import polymer-element definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.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_item.html">

<polymer-element name="my-main-app" >
  <template>
    <style>

    </style>
   <core-scaffold id="mainScaffold">
    <core-header-panel navigation flex mode="seamed">
      <core-toolbar>MYAPP</core-toolbar>

      <core-menu theme="core-light-theme" selectedItem="{{mainMenuItem}}" selected="0">
        <core-item icon="settings" label="Activities"></core-item>
        <core-item icon="settings" label="Other"></core-item>
      </core-menu>

    </core-header-panel>
    <div tool>Activities</div> 
    <div>Hello we got some action here: 
      <br>
      <br>
      <paper-button label="Toggle Drawer" on-click="{{toggleDrawer}}" raisedButton>    </paper-button>
      <br>

      <template if="{{toggled==0}}">
        Panel is shown (int) ?
       </template>
       <template if="{{toggled==1}}">
        Panel is hidden (int) ?
       </template>
    </div>
</core-scaffold>

  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

Everything works (paper components, panel switches when a button is pressed), but a conditional template that does not respond. The only solution is to directly use the Observable mixin and call "deliverChanges" in my method.

, , , , , , Observable mixin. : ? "" ?

( Observable mixin):

import 'package:polymer/polymer.dart';
import 'package:core_elements/core_scaffold.dart';
import 'package:core_elements/core_item.dart';

@CustomTag('my-main-app')
class MyMainApp extends PolymerElement with Observable /* <- THIS SHOUDN'T BE NECESSARY! */ {

  @observable CoreItem mainMenuItem;

  @observable int toggled=0;

  CoreScaffold scaffold;

  MyMainApp.created() : super.created() {
  }

  @override
  void attached() {
    super.attached();
    scaffold = $['mainScaffold'];  


  }

  void toggleDrawer() {
    toggled = 1 - toggled;
    scaffold.togglePanel();
    // THIS SHOULD NOT BE NECESSARY!!!!!
    deliverChanges();
  }
}

@edit: "index.html" :

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestAPp</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Poylmer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>

    <!-- import the click-counter -->
    <link rel="import" href="launcher.html">

    <link rel="stylesheet" href="testapp.css">
  </head>
  <body>
    <my-launcher></my-launcher>
    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Polymer (0.13.x), JS. @edit: ​​.

+4
2

, , . , pubspec .

pubspec lib:

name: mylib
version: 0.0.1
dependencies:
  core_elements: '>=0.2.0 <0.3.0'
  paper_elements: '>=0.1.0 <0.2.0'
  polymer: '>=0.13.0 <0.14.0'

transformers:
- polymer
+1

. main_app.html: <lik rel... <link rel....

+2

More articles:


All Articles