Question

我正在创建一个Javascript类

班级是这个

(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));

我正在使用这个类来动态创建一个div。 div的基本结构将是这样的

<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>

div id employee1将通过连接字符串＆＃39; employee＆＃39;来生成。和id（类的属性）。同样，img url应该来自imageUrl（类的属性）。类似于所有员工的详细信息。

我计划将其编写为内部HTML或追加。我似乎无法将字符串改为正确。

该字符串将写入getPersonDiv函数中的persondiv变量，并在调用该函数时返回。

Answer 1

你可以尝试这样的东西，使用某种javascript微模式：

(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));

示例小提琴：http://jsfiddle.net/6qZg5/

Answer 2

你在找this之类的东西吗？如果是这样，您需要通过将一些预定义的html标记与您的人员数据连接来动态创建div：

Person.prototype.getPersonDiv = function(){
 return '<div id = "employee1" class = "person-profile"> <div class = "avatar"> <img src = "'+ this.imageUrl +'"/> </div> <div class = "employee-details"> <p>' + this.id + '<br/>' + this.name + ' <br/>' + this.position + '<p> </div> </div>'; 
}

我建议你看看一些javascript模板引擎。这是使用john resig的微模板引擎的演示：http://jsfiddle.net/YHZBS/2/。

希望它适合你。

创建内部HTML以附加到div

2 个答案: