How to get template variables by JS in TP

This article is about how JS gets template variables in TP. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The elegant way for JS to get template variables in PHP Framework

When using the PHP framework (this article takes ThinkPHP as an example) for page development, we often encounter the need to replace the template variables in the controller method into the page JS, such as:

Let admin= {: json_encode ($admin)}, / / $admin is the php array level= {$level}; console.log (admin, level)

It is true that the value can be obtained in this way, but there are a few problems.

The syntax of the template variable is placed in js, and the editor will report a syntax error

When the automatic formatting function of the editor is adopted, the declaration structure of the template variable will be destroyed, thus affecting the use of the automatic formatting code function.

Not beautiful enough

In practice, the recommended way is to save the template variables to a specific node, and then convert them into global variables by the global method, and finally need to use the method of these variables to read these global variables. Here is an example of a complete template:

The elegant way for JS to obtain template variables in PHP framework / * General template data storage tag, visually invisible * / .data-box {display: none } Hi. For the result, please see console / * data acquisition * / / * the js variable * / let dataContainerElem = document.querySelector ('.data-box') passed by initializing the page rendering, data = dataContainerElem? DataContainerElem.dataset: {}, dataBox = {}; / / template variable container, Object.keys (data) .forEach (function (key) {dataBox [key] = data [key]); if (isJsonString) dataBox [key] = JSON.parse (datakey); / / only the object is transferred to a string in json format / * determine whether the string belongs to the json string * / function isJsonString (str) {let flag = false; if (typeof str! = 'string') return flag; try {JSON.parse (str); flag = true;} catch (e) {} return flag } / * use data * / / all variables saved to the data node become the attribute console.log (dataBox.admin, dataBox.level) of the `dataBox` object

In the actual development, I will put the css here and the js operation of obtaining data in the global parent template, and then the specific child template can use this function as long as it inherits the parent template, which is convenient for code reuse.

Thank you for reading! This is the end of this article on "how to get template variables in JS in TP". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!