JavaScript上でデータにアクセスするためのPHPオブジェクトの保存方法

Question

私のMySQLデータベースから来るPHPオブジェクトを保存するために、最も計算量が少なく計算量が少ない方法を解明しようとしています。ユーザーがクリックします。

現在、ボタンにカスタム属性としてデータを保存しています。しかし、これは多くのコードを生成し、私は "遅い"と聞いたことがある。私はJSONが私のPHPオブジェクト、$items（下記参照）をエンコードするべきかどうか、そのJavaScriptがどのように見えるのか疑問に思っています。私はCodeigniterをPHPに使用していますので、代わりにforeachというループ構文を使用しています。

私はHTML/PHPで、これまででだのはここです：

<img id="img"></img><a id="url"></a> <!--elements where data is rendered on click--> 
<? foreach($items as $item):?> 
<button data-id="<?=$item->id?>" data-url="<?=$item->url?>" data-img="<?=$item->img?>">click<?=$item->id?></button> 
<?endforeach;?> 

そして、ここでは私のJSです：

$(document.body).on('click', 'button', function(){ 
    var $this=$(this), id=$this.data('id'), url=$this.data('url'), img=$this.data('img'); 
    $('#img').attr('src', img); 
    $('#url').attr('href', url).html(url); 
}); 

私のサイトのデータのほとんどは、MySQLからPHPから来ると私れますそのデータをいつJavaScript配列/ JSONに変換するべきかという問題で、長い間混乱していました。

Answer 1

（それだけであなたはJSになるでしょうデータで構成されて仮定）あなたがjson_encodeあなた$items配列した場合、あなたはJS変数にこれを割り当てることができます。

<script>var items = <?php echo json_encode($items); ?></script> 

あなたはその後、data-urlとdata-img属性を削除することができます。次に、あなたのJSコード内：

var $this = $(this), id = $this.data('id'), url = items[id].url, img = items[id].img; 
// the rest of your code 

編集：

function setup_click(items) { 
    var $img = $('#img'), $url = $('#url'); 

    $('button').click(function(evt) { 
      var id = $(this).data('id'), 
      url = String(items[id].url), 
      img=String(items[id].img); 
     $url.attr('href', url).html(url);   
      $img.attr('src', img); 
    }); 
} 

ここではJavaScript/JSONを披露JSfiddleです：あなたは別のファイルにクリックハンドラを移動するとき、あなたはこのような何かを得るでしょう一部：http://jsfiddle.net/fz5ZT/55/

あなたのテンプレートから一発でこれを呼び出すには：

<script src="[your ext script file path].js"></script> 
<script>setup_click(<?php echo json_encode($items); ?>);</script> 

希望に役立つ:)