Associare l'oggetto JSON all'elemento HTML

Question

Desidero associare un oggetto JSON a un elemento HTML.

ad es.

Ho una "persona" oggetto con il "Nome" attributi "Cognome"

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

così, se un valore degli elementi HTML viene cambiato, allora sarà anche la persona oggetto viene aggiornato.

questo è possibile in alcun modo?

che uso:

• jquery
• ASP.NET MVC 3

Answer 1

Se farete questo molto nella vostra applicazione, si consiglia di portare in una libreria come l'eccellente Knockout.js che utilizza MVVM a fare attacchi come lei.

vostro codice sarebbe simile a questa:

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

E nel tuo JavaScript:

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

ko.applyBindings(new MyViewModel()); 

è anche possibile utilizzare un set di dati, se ci sono molte "persone". Prova questo tutorial se desideri imparare come farlo: Working with Lists and Collections.

Altri link utili:

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

Answer 2

vi consiglio di dare un'occhiata a Knockout. Impostare l'associazione dei dati come si sta cercando è molto semplice con esso.

Answer 3

È possibile analizzare il JSON per trasformarlo in un oggetto JavaScript:

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

Se ho capito i tuoi articoli in modo corretto, si dovrebbe avere JSON che assomigliano a questo:

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

Così si può semplicemente scorrere le persone in questo modo:

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

È possibile utilizzare uno dei Le liberatorie MVC/MVVM sono Backbone.js o Knockoutjs.

Answer 5

In primo luogo, aggiungere id attributi al markup (si può fare questo con il DOM, ma per di chiarezza amor id s sono probabilmente più adatto per questo esempio):

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

Utilizzare un gestore di eventi jQuery per aggiornare il campi ogni volta che vengono modificati (questa è una soluzione inefficiente, ma ottiene il lavoro fatto- preoccuparsi su come ottimizzare una volta che hai qualcosa di funzionale):

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

Ora ogni volta che i campi vengono aggiornati vostro oggetto sarà pure.