0

我正在创建一个 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 idemployee1 将通过连接字符串“employee”和id（类的属性）来创建。同样，img url 应该来自 imageUrl（类的属性）。同样，所有员工的详细信息。

我打算将它写为内部 HTML 或附加。我似乎无法使字符串正确。

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

4

2 回答 2

2

你可以尝试这样的事情，使用某种 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/

于 2012-04-27T12:50:40.283 回答
1

你在寻找这样的东西吗？
如果是这样，您需要通过将一些预定义的 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/。

希望对你有效。

于 2012-04-27T12:52:10.787 回答