26/08/2016

Question reponse avec Polymer Firebase Collection


source https://divshot.com/blog/web-components/building-a-qa-system-with-polymer-and-firebase/
updated to polymer 1.0.0


npm install -g yo
 
npm install -g generator-polymer
 
yo polymer  

gulp serve ( a la place de grunt serve)
 
ne pas supprimer elements.html , mais lui rajouter une ligne : 
<link rel="import" href="qa-app/qa-app.html">
 


creation d'une <qa-app> dans app/elements avec ce code : 
 
 
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<dom-module id="qa-app">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }

     <!-- span,
      input {
        @apply(--paper-font-body2);
  }-->
    </style>

  <!-- <h1 class="page-title" tabindex="-1">{{greeting}}</h1>
    <label for="greeting-input">Update text to change the greeting.</label>
    <!-- Listens for "input" event and sets greeting to <input>.value -->
   <!-- <input id="greeting-input" value="{{greeting::input}}"> -->
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'qa-app',

       /* properties: {
          greeting: {
            type: String,
            value: 'Welcome!',
            notify: true
          }
        }*/
      });
    })();
  </script>
</dom-module> 
 
 
insertion dans index.html : 
  <paper-material elevation="1">
    <qa-app></qa-app>
    </paper-material> 


Au lieu de core-components (<0.8) utiliser bower install --save 
en ayant pris soin de corriger le fichier bower.json ainsi : 

{
  "name": "polymer1-qa",
  "authors": [
    "D.FAVERIS"
  ],
  "private": true,
  "dependencies": {
    "iron-elements": "PolymerElements/iron-elements#^1.0.0",
    "neon-elements": "PolymerElements/neon-elements#^1.0.0",
    "page": "visionmedia/page.js#^1.6.4",
    "paper-elements": "PolymerElements/paper-elements#^1.0.1",
    "platinum-elements": "PolymerElements/platinum-elements#^1.1.0",
    "polymer": "Polymer/polymer#^1.6.0"
  }
}

ajustez les imports ainsi : 


<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">

<dom-module id="qa-app">
  <template>
...


bower install --save firebase/polymerfire a la place de
bower install Polymer/firebase-element --save


Voir avec PolyUp pour upgrader un module Polymer 0.5 en Polymer 1.0



 


Aucun commentaire:

Enregistrer un commentaire