JSON nesnesini HTML öğesine bağlama

Question

Bir JSON nesnesini bir HTML öğesine bağlamak istiyorum.

örn.

HTML öğelerinin bir değer değişmiş alırsa

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

böylece, daha sonra da nesne kişi güncellenir olacak "lastName", nitelikleri "firstName" ile nesne "kişi" var.

Bu mümkün mü?

i kullanın:

• jquery
• ASP.NET MVC 3

Answer 1

Uygulamanızda çok şey yapacaksanız, açıkladığınız gibi bindings yapmak için MVVM kullanan mükemmel Knockout.js gibi bir kitaplık getirmek isteyebilirsiniz.

İşaretlemeniz şöyle görünecektir:

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

Ve JavaScript'inizin: Birçok varsa

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

ko.applyBindings(new MyViewModel()); 

Ayrıca, bir veri kümesini kullanabilirsiniz "insanlar." Bunu nasıl yapacağınızı öğrenmek isterseniz şu eğiticiyi deneyin: Working with Lists and Collections. Ben anlasalardı

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

:

Diğer yararlı bağlantılar:

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

Answer 2

Ben Knockout bir göz atmanızı öneririz. Aradığın gibi veri bağlamayı kurmak çok basit.

Answer 3

Bir JavaScript nesnesi haline getirmek için JSON ayrıştırmak senin görevin

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

Yani şöyle insanlar aracılığıyla sadece döngü edebilirsiniz:

$(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); 
    }); 
});​ 

Fiddle: http://jsfiddle.net/RgdhX/2/

Answer 4

Sen birini kullanabilirsiniz doğru üzerinde, aşağıdaki görüldüğü gibi JSON olmalı MVC/MVVM libereries, Backbone.js veya Knockoutjs'dur.

Answer 5

Öncelikle İşaretlemenize için id özelliklerini eklemek (DOM ile değil Açıklık uğruna id s için bu yapabileceğini muhtemelen bu örneğin en uygun):

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

kullanın jQuery olay işleyicisi güncellemek için bunlar değiştirilebilir her alanlar (bu verimsiz bir çözümdür ama işlevsel bir şey var bir kere optimize dert yapılır-iş alır):

// 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... 
}); 

Şimdi alanlar nesne güncellenir her zaman olacaktır çok.