将Javascript对象与HTML容器匹配

我已经采取了一些不同的方法来解决这个问题，但从来没有真正对我的解决方案的僵化感到满意。我试图将javascript中创建的对象映射到html文档中的容器

让我给你举个例子。假设我有一个javascript中的电话号码对象：

var PhoneNumber = function(number, type) {
    this.number = number;
    this.type = type;
}

var myPhone = new PhoneNumber('5555555555', 'Home');

在我的html文档中，我有一系列DIV，它们基本上是空容器，等待前面提到的对象填充并显示给用户

<div id="phoneNumberContainer">
    <div class="row">        
        <div id="number"></div>
        <div id="type"></div>
    </div>
</div>

这当然可以很好地工作，但它需要为我想要映射的每个对象反复编写大量相同的代码。我希望有一种方法可以这样做，这样我就可以将对象和容器传递到一个函数中，它会根据对象自动填充DIV元素：

function mapPhoneNumber(phoneObject) {
    var phoneContainerChildren = document.getElementById('phoneNumberContainer').childNodes;
    for(x in phoneContainerChildren) {
        phoneContainerChildren[x] = myPhone.number;
    }
}

当然，这不是一个有效的示例，因为容器的顺序不能保证与电话号码对象相同，孩子们在我的DIV旁边会有其他类型的节点等等。我可以把phone number参数名称放在DIV元素的实际ID中，然后将其与对象进行匹配，并在匹配时填充对象，但是我不喜欢在我的DIV元素上有如此特定的ID，如果被另一个设计师更改，将会完全破坏我的javascript

---

有人对我如何实现这样的东西有什么建议吗？我并不反对jQuery，因为我在解决方案中使用了很多jQuery。

我在许多项目中使用了类似的东西

<div id="container">
    <div class="row">        
        <div class="prop"></div>
        <div class="propValue"></div>
    </div>
</div>

function BindValues(container, prop, propValue)
{
   container.find(".prop").val = prop; 
   container.find(".propValue").val = propValue;
return container;
}

函数绑定值（容器、属性、属性值）
{
container.find（“.prop”）.val=prop；
container.find（“.propValue”）.val=propValue；
返回容器；
}

您可以向电话号码对象添加一个方法，并在HTML中使用类而不是ID，这样每页可以有多个类。然后，您的所有代码都附加到对象上，您不必每次都重新键入它：

<div id="homePhone" class="phoneNumberContainer">
    <div class="row">        
        <div class="number"></div>
        <div class="type"></div>
    </div>
</div>

var PhoneNumber = function(number, type) {
    this.number = number;
    this.type = type;
}

PhoneNumber.prototype.setHTML(dest) {
    var item = $(dest);
    item.find(".type").html(this.type);
    item.find(".number").html(this.number);
}

var myPhone = new PhoneNumber('5555555555', 'Home');
myPhone.setHTML("#homePhone");

var PhoneNumber=函数（编号、类型）{
这个数字=数字；
this.type=type；
}
PhoneNumber.prototype.setHTML（dest）{
风险值项目=$（目的地）；
item.find（“.type”）.html（this.type）；
item.find（“.number”）.html（此.number）；
}
var myPhone=新电话号码（'5555'，'Home'）；
myPhone.setHTML（“#homePhone”）；

---

要想更自动地做到这一点，我们需要更多地了解电话号码是如何创建的，HTML是如何创建的，以及如何将一个电话号码与另一个电话号码自动关联起来？您是否有一个PhoneNumber对象列表，您只想创建一组相应的HTML？或者HTML已经存在，您想填充它吗？

我不能100%确定它是否是您想要的，但我认为这可能是一个可行的解决方案：

var DOMable = {
  writeToDOM : function( node ){
    for( var i in this ) if( this.hasOwnProperty( i ) ){
      node.find( "." + i ).text( this[i] );
    }
  }
};
var PhoneNumber = function(number, type) {
  this.number = number;
  this.type = type;
};
PhoneNumber.prototype = DOMable;

var myPhone = new PhoneNumber('5555555555', 'Home');

然后你可以打电话：

myPhone.writedom（jQuery（“#myPhone”）；

对于HTML结构，如：

是否有多个对象具有

id=“phoneNumberContainer”

、

id=“number”

和

id=“type”

？如果是这样，你就不能那样做。把它们换成班级。给定的ID每页只能使用一次。在我的html中，phoneNumberContainer本质上是一个模板。我使用id克隆到整个东西，用数据填充它，然后将它返回到html。我或多或少关心的是如何自动填充容器的子容器，而不是手动填充。克隆容器后，是否会清除冲突的ID？请参阅下面我的答案，了解我是如何使用类而不是ID的。是的，当我克隆时，我会重置ID。您是否也重置

ID=“number”

和

ID=“type”

？您的模板中有三个ID，而不仅仅是一个。我仍然需要为每个对象的每个元素传递一个属性和值，这听起来与我已经在做的事情基本相同，只是绑定到一个函数中。您可以使用多个键值类型。你最初的方法是基于一个类型化的对象，并且只对你输入的电话号码有效。我已经建立了这种系统。问题是我有很多不同类型的对象（电话号码、电子邮件、地址、城市、州等），我希望能够只维护一个函数，将每个对象映射到各自的容器。它们在工作方式上都是相同的对象，但它们有不同的参数。抱歉，我无法从您目前所描述的内容中理解您真正想要解决的问题。与其为我拥有的每个对象重复我的mapPhoneNumber函数，我希望有某种mapAnyObject函数，我可以将容器和数据传递到其中，它将自动填充容器中的div。这样，如果我想更改映射的工作方式或在将来添加一些内容，我只需要编辑一个函数，而不是5个、10个或20个不同的函数，它们基本上都做相同的事情。@ryandlf-我上面实现它的方式，您只需将容器传递给任何类型的对象，并对该对象调用

setHTML（）

。它将在容器中找到适当的字段（假设它是正确类型的容器）。所有对象类型都可以有自己的

setHTML（）

方法，因此无论对象类型如何，都可以调用相同的方法。每个对象都管理自己的“set”代码，您只需调用相同的方法，而不考虑类型。@ryandlf-您还可以让每种类型的对象创建适当类型的容器，并将其数据设置到其中。然后，不管您拥有什么类型的对象，只要调用相同的方法（类似于

createDisplay（）

），它就会从模板创建HTML并填充该HTML。这一切都可能非常糟糕。拥有一个所有类型都可以共享的基本实现或帮助函数，以使更多代码变得通用，这可能是有意义的。但是，为了使用

var DOMable = {
  writeToDOM : function( node ){
    for( var i in this ) if( this.hasOwnProperty( i ) ){
      node.find( "." + i ).text( this[i] );
    }
  }
};
var PhoneNumber = function(number, type) {
  this.number = number;
  this.type = type;
};
PhoneNumber.prototype = DOMable;

var myPhone = new PhoneNumber('5555555555', 'Home');