Question

我已经采取了一些不同的方法来解决这个问题，但从来没有真正满意我的解决方案的不灵活性。我试图将在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>

现在，我希望在我的javascript中有一个函数，它将自动获取该电话号码对象并用其数据填充phoneNumberContainer元素。我有多种类型的具有不同参数的对象，因此它必须是通用的。

目前我发现自己做了很多这样的事情：

function mapPhoneNumber() {
    var numberContainer = document.getElementById('number');
    numberContainer.innerHTML = myPhone.number;

    var typeContainer = document.getElementById('type');
    typeContainer.innerHTML = myPhone.type;
}

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

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

当然这不是一个有效的例子，因为容器的顺序不能保证与电话号码对象相同，并且孩子们在我的div等旁边会有其他类型的节点。我可以把手机放DIV元素的实际ID中的数字参数名称然后将其与对象匹配并在我有匹配时填充对象，但我不想在我的DIV元素上具有这样的特定ID，如果由另一个设计者更改将完全毁掉我的javascript。

有没有人对如何实现这样的事情有任何建议？我并不反对jQuery，因为我在我的解决方案中使用了很多。

Answer 1

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

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

Answer 2

您可以向电话号码对象添加方法，并使用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");

要自动执行此操作，我们需要了解更多有关如何创建电话号码，如何创建HTML以及如何自动将其与另一个相关联的信息？你有一个PhoneNumber对象列表，你只想创建一堆相应的HTML？或者HTML已经存在并且您想要填充它吗？

Answer 3

我不是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.writeToDOM( jQuery( '#myPhone' ) );

表示HTML结构：

<div id="myPhone">
  <div class="number">
  </div>
  <div class="type">
  </div>
</div>

将Javascript对象与HTML容器匹配

3 个答案: