Question

I am creating a Javascript class

The class is this

(function(window){

    function Person(id,name,position,imageUrl){

    this.id = id;
    this.name = name;
    this.position = position;
    this.imageUrl = imageUrl;

    }

    Person.prototype.getPersonDiv = function(){

      var persondiv; 

    }

}(window));

I am using this class to create a div on the fly. The basic structure of the div will be like this

<div id = "employee1" class = 'person-profile'>

 <div class = 'avatar'>
   <img src = ""/>
 </div>

 <div class = 'employee-details'>
   <p>this.id <br/> this.name <br/> this.position<p>   
 </div>

</div>

The div id employee1 is to be made by concatenating string ’employee’ and id (the property of the class). Similarly img url should come from imageUrl(the property of the class).Similarly all employee details.

What I am planning is to write it as inner HTML or appending. I cant seem to get the making to string correct.

The string will be written to persondiv variable in getPersonDiv function and returned when I invoke the function.

Answer 1

you could try something like this, using some kind of javascript microtemplating :

(function(window){

    function Person(id,name,position,imageUrl){

    this.id = id;
    this.name = name;
    this.position = position;
    this.imageUrl = imageUrl;

    }

    Person.prototype.getPersonDiv = function(){
      var _this = this;

      /* create basic person template */
      var personTPL = "<div class = 'employee-details'>"
          + "<p>{id}<br/>{name}<br/>{position}<p></div>";

      /* change any placeholder with instance properties */
      return personTPL.replace(/\{([^}]+)\}/g, function(tpl, key) {
             return  _this[key] || "undefined"
          });  
    };


     var me = new Person("10", "Fabrizio", "javascriptmonkey", "http://...");

     /* return HTML */
     console.log(me.getPersonDiv());

     /** e.g.
      *
      * <div class = 'employee-details'><p>10<br/>
      * Fabrizio<br/>javascriptmonkey<p></div>  
      */
}(window));

Example fiddle : http://jsfiddle.net/6qZg5/