MySqlのPHP配列へのポリマーペーパーリストボックスのバインド

私はポリマーが初めてで、私の会社のための簡単な管理Webアプリケーションを作成しようとしています。私はデータベースから、単純なリストのvarchar（顧客の名前のリスト）を返します。私はpaper-listbox要素またはiron-list要素に表示したい（その項目はクリック可能で、show info人について）。MySqlのPHP配列へのポリマーペーパーリストボックスのバインド

私はアイテムのプロパティにストレートのPHPを使用して試してみましたが、それは動作しません：

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

私はポリマーの式を使用してみましたが、機能していません。私は最後のチャンスとしてそれにいくつかのJavaScriptコードでスクリプトタグを使用しようとしましたが、nada。

私はページに表示されているすべてが空白です。私はfedoraマシンでchromeを使用しています - VScodeをIDEとして - xDebugはPHPをデバッグします。

どうしたらいいですか？？ - >英語

<?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>

助けを事前に感謝、と文法のため申し訳ありません：コードは、すべてのスクリプトのメインview.htmlであります私の母国語ではありません。

出典

2016-09-09 Luca Pellizzari

チェック！ –

[OK]を、ここでいくつかのアドバイスを、次の、私は2つのスクリプトにこの事を分割しましたが、これが結果です：それが働いています今。

リスト-view.html thereiがあればエラーメッセージChromeDevTools

<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>

メイン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>

出典

2016-09-16 08:52:31

あなたは別のファイルにメインビュー成分を抽出し、それをインポートする必要があります。

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

そうでなければ、それは実行されません。また、などの高分子オブジェクト内のあなたの変数を定義することにより、高分子結合のデータを使用してみてください：

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

出典

2016-09-09 22:31:29 Pietfro

MySqlのPHP配列へのポリマーペーパーリストボックスのバインド

答えて

関連する問題