JSONオブジェクトをHTML要素にバインドする

Question

JSONオブジェクトをHTML要素にバインドしたいとします。

HTML要素の値が変更されます場合

私が属性「firstNameの」とオブジェクト「人」、「lastNameの」

<div class="person-list"> 
    <div class="person-list-item"> 
    <div>John</div> ---> bind it to person.firstName 
    <div>Smith</div> ---> bind it to person.lastName 
    </div> 
</div> 

を持っているが、その後も、対象者は、更新されます。

これはどのような場合でも可能ですか？

私が使用します。

• jqueryの
• ASP.NET MVC 3

Answer 1

アプリケーションでこれを多く実行する場合は、説明のとおりにMVVMを使用する優れたKnockout.jsなどのライブラリを持ってくることができます。

あなたのマークアップは次のようになります。

<div data-bind="text: firstName"></div> 
<div data-bind="text: lastName"></div> 

そして、あなたのJavaScriptで：「人」

function MyViewModel() { 
    this.firstName = "John"; 
    this.lastName = "Smith"; 
} 

ko.applyBindings(new MyViewModel()); 

多くがある場合は、データセットを使用することができますがあなたがそれを行う方法を学びたいなら、このチュートリアルを試してみてください：Working with Lists and Collections。

その他の便利なリンク：私は理解している場合

var data = $.parseJSON(json_string); 
// or without jQuery: 
var data = JSON.parse(json_string); 

：

• Introduction tutorial
• Excellent demo video (about 30 minutes)

Answer 2

私はKnockoutでご覧になることをお勧めします。あなたが探しているようにデータバインディングを設定することは、それと非常に簡単です。

Answer 3

あなたは、JavaScriptオブジェクトにそれを回すためにJSONを解析することができますあなたのクエストあなたは、のいずれかを使用することができますhttp://jsfiddle.net/RgdhX/2/

Answer 4

：

$(document).ready(function() { 
    var str = '[{"firstName":"John","lastName":"Smith"},{"firstName":"Another","lastName": "Person"}]', 
     data = $.parseJSON(str); 
    $.each(data, function() { 
     var html = '<div class="person-list-item"><div>' + this.firstName + '</div><div>' + this.lastName + '</div></div>'; 
     $('#person-list').append(html); 
    }); 
});​ 

フィドル：そうのような人々を通して

[ 
    { 
     "firstName": "John", 
     "lastName": "Smith" 
    }, 
    { 
     "firstName": "Another", 
     "lastName": "Person" 
    } // etc 
] 

あなたができるだけのループ：正常に、あなたはこのように見えるJSONを持つべきですMVC/MVVM libereriesはBackbone.jsまたはKnockoutjsです。

Answer 5

まず、（あなたはDOMでこれを行うことができますが、明確さのためにidのは、おそらくこの例のために最も適している）あなたのマークアップにid属性を追加します。

<div class="person-list-item"> 
    <div id="firstname">John</div> 
    <div id="lastname">Smith</div> 
</div> 

更新するために、jQueryのイベントハンドラを使用します彼らは変更されるたびにフィールド（これは非効率的なソリューションですが、あなたが機能何かを持っていたら、最適化を心配完了したジョブ取得）：

は

// declare your object 
function person(firstn, lastn) { 
    this.firstname = firstn; 
    this.lastname = lastn; 
} 

var myGuy = new person("John", "Smith"); 

$(document).ready(function() { 
    $("#firstname").change(function() { 
     myGuy.firstname = $("#firstname").val(); 
    }); 

    $("#lastname").change(function() { 
     myGuy.lastname = $("#lastname").val(); 
    }); 

    // etc... 
}); 

今のフィールドは、あなたのオブジェクトを更新しているたびになりますがあまりにも。