从html到javascript的变量

Question

I am wondering on how to solve my problem , but I don't know which is the best way to do this. So I have an html page in which I am passing a id through $_GET[id_plot]) that I print it like this :

  echo "var id_get_plot = '".$_GET[id_plot]."'; ";

That , I suppose is a global variable , that , let's say it clearly, we all hate. The goal is to use this var inside an external script.

The solution I am adopting right now is to instanciate a namespace and then binding the var to it , like this :

HTML

      echo " Model = Model || {};
             Model.id_get_plot = '".$_GET[id_plot]."'; ";

SCRIPT.JS

      Model = Model || {};
      Model.get_id = function(){ 
         console.log(this.id_get_plot) //it prints the right value
      });

What I am thinking is : is this a good way to solve my problem? There are other , and if possible, more elegant way to solve this ?

Thank you in advance

Answer 1

Don't generate JavaScript from PHP. Use json_encode() to create a JSON object that your JS can use. This decouples the two languages, and your data will be properly escaped

The simplest thing to put it into a namespace is the following, there are better ways, but this should get you going.

var Model = window.Model || {
     getId: function() {
        return this.id;
     },
     // Would be better as a constructor, but since you want a singleton
     init: function(id) {
         this.id = id;
     }
};
// If you need more than one value, make an object out of this....
Model.init(<?php echo json_encode($_GET['id_plot']) ?>)