Binding Polymer Papier-Listbox zu einem PHP-Array von MySql

Ich bin neu in Polymer und ich versuche, eine einfache Management-Web-App für meine Firma zu erstellen. Also habe ich eine Abfrage von meiner Datenbank, die eine einfache Liste von varchar (eine Liste von Namen von Kunden), die ich in einem Papier-Listbox-Element oder Iron-List-Element anzeigen möchte (die Elemente werden anklickbar sein und Informationen anzeigen über die Person).Binding Polymer Papier-Listbox zu einem PHP-Array von MySql

Ich habe versucht, gerade php in die Elemente Eigenschaft verwenden, aber es funktioniert nicht:

<iron-list items="<?php echo $jsonresult;?>" as="item">

Ich habe Polymer Expression versucht mit, aber funktioniert nicht. Ich habe versucht, ein Skript-Tag mit etwas Javascript-Code als letzte Chance, aber nada.

Alles, was ich auf der Seite sehe, ist leerer Platz. Ich verwende Chrome auf einem Fedora-Computer - VScode als IDE - xDebug, um PHP zu debuggen.

Wie zur Hölle mache ich das? der Code ist alles in einem Skript Haupt view.html:

<?php 

//db data 
$host = '192...... etc etc '; 
$dbuser = 'myuser '; 
$dbpass = 'mypass'; 
$dbname = 'mydatabase'; 

$conn = mysqli_connect($host, $dbuser, $dbpass, $dbname); 

if (!$conn) 
{ 
    echo "Error: Unable to connect " . PHP_EOL; 
    echo "Debugging Error: " . mysqli_connect_errno() . PHP_EOL; 
    exit; 
} 
else 
{ 
    echo "Hurray" . PHP_EOL; 
} 

$sql = "SELECT username as user FROM mytable where condition"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) 
{ 
    echo "Query executed rows--> : " . $result->num_rows . " rows. " . PHP_EOL; 
    $rows = array(); 

    while ($r = mysqli_fetch_assoc($result)) 
    { 
     $rows[] = $r; 
    } 
}

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 

     <title>Title</title> 

     <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script> 

     <link rel="import" href="../bower_components/polymer/polymer.html"> 
     <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html"> 
     <link rel="import" href="../bower_components/paper-item/paper-item.html"> 
     <link rel="import" href="../bower_components/iron-collapse/iron-collapse.html"> 
     <link rel="import" href="../bower_components/iron-list/iron-list.html">  

     <style is="custom-syle"> 

      .horizontal-section { 
       padding: 0 !important; 
      } 

      .avatar { 
       display: inline-block; 
       width: 40px; 
       height: 40px; 
       border-radius: 50%; 
       overflow: hidden; 
       background: #ccc; 
      } 

      paper-item { 
       --paper-item: { 
        cursor: pointer; 
       } 
      } 

      .sublist { 
       padding-left: 20px; 
       padding-right: 20px; 
      } 
     </style> 

    </head> 
<body unresolved> 
<dom-module id="main-view"> 
    <template> 

    <div class="horizontal-section-container"> 
     <div> 
      <h4 style="margin-left: 15px;">Customers Table</h4> 
      <div class="horizontal-section"> 
       <paper-listbox id="list" items="[[arraySource]]"> 
       </paper-listbox> 
      </div> 
     </div> 
    </div> 

    </template> 

    <script> 
     Polymer ({ 
      is: 'main-view' 
     }); 
    </script> 

    <script type="javascript"> 
     var arraySource = <?php echo json_encode($rows); ?>; 
     document.getElementById('list').items = arraySource; 
    </script> 

</dom-module> 
</body>

Vielen Dank im Voraus für die Hilfe, und sorry für die Grammatik -> Englisch? ist nicht meine erste Sprache.

Quelle

2016-09-09 Luca Pellizzari

Prüfung die ChromeDevTools wenn therei eine Fehlermeldung? –

Ok einige Ratschläge hier folgende, habe ich dieses Ding in zwei Skripte aufgeteilt, das ist das Ergebnis: Es funktioniert jetzt.

list-view.html

<head> 
    <meta charset="utf-8"> 

    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 

    <!-- import the components to build up the list --> 
    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html"> 
    <link rel="import" href="../bower_components/paper-item/paper-item.html"> 
</head> 

<body> 
    <dom-module id="list-view"> 
     <template> 
      <div class="horizontal-section-container"> 
       <div> 
        <h4 style="margin-left: 15px; ">Customer Table</h4> 
        <div class="horizontal-section"> 
         <paper-listbox id="list"> 
          <template is="dom-repeat" items="[[arraySource]]"> 
           <paper-item on-tap="_itemTapped">[[item.user]]</paper-item> 
          </template> 
         </paper-listbox> 
        </div> 
       </div> 
      </div> 
     </template> 

     <script> 
      Polymer ({ 
       is: 'list-view', 
       properties: { 
        arraySource: Array 
       }, 

       _itemTapped: function (e) 
       { 
        var item = e.model.item; 
        console.log(item); 
       } 
      }); 
     </script> 
    </dom-module> 
</body>

Haupt view.html

<html> 

<head> 
    <meta charset="utf-8"> 
    <title>SITE</title> 
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script> 

    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="./list-view.html"> 
</head> 

<body> 
    <dom-module id="main-view"> 
     <template> 
      <div> 
       <list-view id="list" array-source="<?php echo $jsonSource ?>" as="item"></list-view> 
      </div> 
     </template> 

     <script> 
      Polymer({ 
       is: 'main-view' 
      }); 
     </script> 
    </dom-module> 
</body> 

</html>

Quelle

2016-09-16 08:52:31

Sie benötigen Haupt-View-Komponente in einer separaten Datei zu extrahieren und dann importieren:

<link rel="import" href="./main-view.html"> 
<body unresolved> 
<template is="dom-bind"> 
    <main-view></main-view> 
</template> 
</body>

Sonst wird es nicht laufen. Versuchen Sie auch, die Bindung Polymer Daten zu verwenden, indem Sie Ihre Variable innerhalb Polymer Objekt als solche definieren:

Polymer ({ 
    is: 'main-view', 
    properties: { 
     arraySource: { 
     type: Array, 
     value: function() { 
      return <?php echo json_encode($rows); ?>; 
     } 
     } 
    } 
});

Quelle

2016-09-09 22:31:29 Pietfro

Binding Polymer Papier-Listbox zu einem PHP-Array von MySql

Antwort

Verwandte Themen