HTMLコンテナへのJavascriptオブジェクトの一致

Question

この問題を解決するには、いくつかのアプローチを取ってきましたが、私のソリューションの柔軟性には本当に満足していません。私はjavascriptで作成されたオブジェクトを自分のhtmlドキュメントのコンテナにマップしようとしています。

例を挙げておきます。

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

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

そして、私のHTMLドキュメント内、私は基本的にforementionedオブジェクトによって移入して、ユーザに表示されるのを待って、空のコンテナですDIVの一連のを持っている：私はJavaScriptで電話番号のオブジェクトを持っていると言います。

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

は今、私は自動的にその電話番号のオブジェクトを取得し、そのデータをphoneNumberContainer要素を記入します私のjavascript内の関数を持っていると思います。私は異なるパラメータを持つオブジェクトの複数のタイプを持っているので、それは一般的でなければなりません。

は現在、私は自分自身は、この多くのをやって見つける：

もちろんうまく動作しますが、一つ一つのオブジェクトのために何度も何度も同じコードの多くを書くための呼び出しは、私がしたい

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に入れることができますそれをオブジェクトと照合して一致したオブジェクトを埋めますが、別のデザイナーによって変更された場合、私のjavascriptが完全に破壊されるようなDIV要素にそのような特定のIDを持つ必要はありません。

誰かが私のような何かを実装する方法についての提案はありますか？私はjQueryに反対しているわけではありません。

Answer 1

は、私は100％確実ではないが、私は、これは可能な解決策かもしれないと思うのための：

myPhone.writeToDOM(jQuery('#myPhone')); 

：

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

が次にあなたが呼び出すことができます

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

Answer 2

私はこれに似た何かを自分のプロジェクトの多くで使っています。

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

あなたはあなたの電話番号オブジェクトにメソッドを追加し、ページごとに複数のを持つことができますので、あなたの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が作成され、どのように自動的に他のものと関連付けることができますか？対応するHTMLの束を作成したいだけのPhoneNumberオブジェクトのリストがありますか？あるいは、HTMLがすでに存在し、それを埋めたいのですか？それはあなたが探しているものかどう