TPでJSのテンプレート変数を取得する方法（詳細例）-ThinkPHP-php.cn

TPでJSのテンプレート変数を取得する方法（詳細例）

藏色散人

リリース： 2021-10-13 15:47:59

転載

4293 人が閲覧しました

次の hinkphp フレームワークこのチュートリアルコラムでは、PHP フレームワークで JS を介してテンプレート変数を取得するエレガントな方法を紹介します。

PHP フレームワーク (この記事では例として ThinkPHP を使用します) をページ開発に使用する場合、コントローラメソッド内のテンプレート変数をページ JS に置き換えて操作する必要がある場合、一般的な方法は次のとおりです。

  let admin={:json_encode($admin)},  //$admin是php数组
      level={$level};  
  console.log(admin, level);

ログイン後にコピー

このメソッドは確かに値を取得できますが、いくつかの問題があります

テンプレート変数の構文が js に配置され、エディターが構文エラーを報告します
エディターの自動整形機能を使用すると、テンプレート変数の宣言構造が破壊されます自動フォーマットコード関数の使用はあまり美しくありません
実際には、より推奨される方法は次のとおりです。

テンプレート変数を特定のノードに保存します。最後に、これらの変数のメソッドを使用して、これらのグローバル変数を読み取る必要があります

。以下に完全なテンプレートを例に挙げます。

<!DOCTYPE html>  
<html lang ="en">  
<head>  
 <meta charset="UTF-8">  
 <title>PHP框架中JS优雅获取模板变量的方式</title>  
 <style>  
 /* 通用的模板数据存放标签，视觉不可见 */  
 .data-box {  
      display: none;  
  }  
 </style>  
</head>  
<body>  
<!-- 页面内容 -->  
<h2>Hi,结果请看console</h2>
  
<!-- 数据存储节点,可以同时存在多个data属性 -->  
<!-- 如果模板变量是数组，须先转成json字符串（如$admin） -->  
<div class="data-box" data-admin=&#39;{:json_encode($admin)}&#39; data-level=&#39;{$level}&#39;></div>  
  
  
<script>  
  /* 获取数据的操作 */  
  
 /* 初始化页面渲染时传过来的js变量 */  
 let dataContainerElem = document.querySelector(&#39;.data-box&#39;),  
     data = dataContainerElem ? dataContainerElem.dataset : {},  
     dataBox = {}; //模板变量容器，`.data-box`类选择器所在的所有`data`属性值集合  
  
  Object.keys(data).forEach(function (key) {  
      dataBox[key] = data[key];  
      if (isJsonString(data[key])) dataBox[key] = JSON.parse(data[key]); //是json格式的字串才转对象  
  });  
  
 /**  
  * 判断字串是否属于json字串  
  */  
 function isJsonString(str) {  
     let flag = false;  
  
     if (typeof str != &#39;string&#39;) return flag;  
  
     try {  
         JSON.parse(str);  
         flag = true;  
     } catch (e) {}  
  
     return flag;  
  }  
</script>  
  
<script>  
  /* 使用数据 */  
 //所有保存到数据节点的变量都成为`dataBox`对象的属性  
  console.log(dataBox.admin, dataBox.level);  
</script>  
</body>  
</html>

ログイン後にコピー

実際の開発では、CSS をここに配置し、データを取得するための JS オペレーションをグローバルマザーテンプレートに配置します。その後、特定のサブテンプレートは継承するだけで済みます。マザーテンプレートこの関数を使用すると、コードの再利用が容易になります。

推奨: 「

最新の 10 件の thinkphp ビデオチュートリアル

」

以上がTPでJSのテンプレート変数を取得する方法（詳細例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。