Binden JSON-Objekt eines HTML-Elements

Ich soll binden ein JSON-Objekt um ein HTML-element.

z.B.

Ich habe ein Objekt "person" mit den Attributen "Vorname", "Nachname"

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

so, wenn ein Wert des HTML-elements verändert wird, dann wird auch das Objekt person wird aktualisiert.

ist das möglich, in irgendeiner Weise?

benutze ich:

  • jquery
  • ASP.NET MVC-3
  • Verwenden Sie ein MVC-framework?
  • und wie erwarten, dass das html-element geändert werden? und warum das die Sache ändern Sie Ihre html-Elemente aktualisieren können, die json-gleichzeitig auch??
InformationsquelleAutor Wasser Trinker | 2012-03-05
  1. 14

    Wenn Sie dies tun, eine Menge in Ihre Anwendung, möchten Sie vielleicht bringen, die in einer Bibliothek wie der ausgezeichnete Knockout.js, die verwendet MVVM zu tun-Bindungen, wie Sie beschreiben.

    Ihren markup-Code würde wie folgt Aussehen:

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

    Und in Ihrem JavaScript:

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

ko.applyBindings(new MyViewModel());

    Können Sie auch verwenden, einen Datensatz, wenn es viele "Leute." Versuchen Sie dieses tutorial, wenn Sie erfahren möchten, wie das geht: Arbeiten mit Listen und Sammlungen.

    Weitere nützliche links:

    InformationsquelleAutor Drew Gaynor
  2. 3

    Erste, hinzufügen id Attribute auf Ihre markup-Symbole (man könnte dies mit dem DOM, aber um der Klarheit Willen ids sind wahrscheinlich am besten geeignet für dieses Beispiel):

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

    Benutzen eine jQuery event handler zum aktualisieren der Felder, wenn Sie geändert werden (dies ist eine ineffiziente Lösung, aber bekommt den job getan - Gedanken über die Optimierung sobald Sie etwas funktionales):

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

    Nun jedes mal, wenn die Felder aktualisiert werden, Ihr Objekt zu.

    InformationsquelleAutor ZenLikeThat
  3. 1

    Können Sie Parsen der JSON verwandeln es in ein JavaScript-Objekt:

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

    Wenn ich deine Frage verstanden richtig, sollte man haben, JSON, die wie folgt Aussehen:

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

    So können Sie einfach eine Schleife durch den Menschen etwa so:

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

    InformationsquelleAutor Alex Coplan
  4. 1

    Einfachen one-way-Ansatz mit jquery...

        var resp = your_json_data;
    $(function () {
        $(".jsondata").each(function () {
            $(this).html(eval($(this).attr("data")));
        });
    });

    dann in die Seite...

     <span class="jsondata" data="resp.result.formatted_phone_number" />
    InformationsquelleAutor Sean
  5. 0

    Ich empfehle einen Blick auf Knockout. Einrichten der data binding, wie Sie sind, suchen, ist sehr einfach mit ihm.

    InformationsquelleAutor mpdaugherty
  6. 0

    Können Sie mit einem MVC/MVVM libereries so ist Backbone.js oder Knockoutjs.

    InformationsquelleAutor Maxim Manco
Schreibe einen Kommentar