JavaScript-Objekt an DOM binden

Ich versuche ein Javascript-Objekt zu erstellen, das den Status eines Formulars verfolgt. Mein erster Stich war eine langwierige "prozedurale" jQuery-Lösung, bei der ich jedes Formularfeld durchlaufen, testen, ob es auf "All" gesetzt ist, die active Klasse entfernen oder es hinzufügen, wenn es nicht da ist. Dies ist eine kurze Version:JavaScript-Objekt an DOM binden

function activeClass() { 
    if(this.val() === 'All') { 
    $(this).parent().removeClass('active'); 
    } 
    $('#content-filter select', context).foreach(function() { 
    if(this.val() !== 'All') { 
     this.addClass('active'); 
    } 
    }); 
}

Wir machen eine ganze Reihe von anderen Dingen, so wird der Code immer lang. Die nächste Richtung, die ich nehmen möchte, besteht darin, ein separates Objekt zu erstellen, das den Formularstatus verfolgt und Ereignis-Listener verwendet, um den Formularzustand zu aktualisieren, wenn er sich ändert.

formState = { 
    featured: false, 
    all: false, 
    category: 'All', 
    topics: 'All', 
    audience: 'All', 
    date: {value: '', min: '', max: '', filter_op: '='}, 
    };

Der Teil, mit dem ich kämpfe, ist, wie Sie das Objekt an das DOM binden. Meine erste Neigung ist so etwas wie dies zu tun:

$('select').on('change', function() { 
    formState[$(this).attr('id')] = $(this).val(); 
    });

Das Problem hierbei ist, dass die id des Auswahl hat die Eigenschaft, entsprechen. Außerdem wurde mir gesagt, dass die Methode hierfür eine Getter- und/oder Setter-Methode ist, um diese Werte zu ändern. Ich verstehe, was das bedeutet, aber wo ich verwirrt bin, ist, wie diese an das DOM gebunden werden.

Quelle

2016-05-27 icicleking

Warum verwenden Sie ein separates Objekt, um den Status zu verfolgen, wenn Sie nur den Status aus dem DOM-Element abrufen können? – Barmar

Wenn Sie einen zusätzlichen Status für das Element beibehalten möchten, können Sie die Methode '.data()' von jQuery verwenden, um beliebige Daten mit einem DOM-Element zu verknüpfen. – Barmar

Life-Saving-Vorschlag: lernen Sie ein Framework, das mit der Datenbindung hilft, sonst wird Ihr Code viel wachsen und zu schwierig zu pflegen. I will leave here some suggestions.

nun jQuery zu tun, dass ... Sie 2 wichtigsten großen Möglichkeiten: Update das Formular Modell bei jeder Änderung (ähnlich dem, was Sie haben) oder einfach nur sammeln alle Felddaten auf einem Formular Aktion (Beispiel: Drücken der Senden-Taste).

Option1: Aktualisieren Sie das Modell die ganze Zeit!

Sie müssen eine gute Referenz (ID) für jede Eigenschaft im Formular haben, damit Sie die Listener erstellen können, die Sie benötigen, um das Formularmodell nach Bedarf zu aktualisieren. Ähnlich was du getan hast:

$('#'+fieldId).on('change', function() { 
    var myNewValue = $('#'+fieldId).getValue(); 
    updateMyFormModel(fieldId, newValue); 
});

Für jedes Formularfeld ein Präfix hinzufügen soll, vielleicht, um anzuzeigen, wo das Grundstück liegt daran, wenn Sie mehrere Formulare in der gleichen Seite verwenden und registrieren alle Beobachter in das gleiche Objekt es kann chaotisch werden, sehr schnell.

Ihre Form Sendetaste sollte so etwas wie

onclick="retrieveMyFormModel()"

, wo Sie gerade Ihr ständig aktualisierter Form Modell erhalten und es an den Server senden.

Option2: Sammeln Sie alle Daten am Ende

Tun Sie nichts, bis die sehr, bis der Benutzer klickt in der Sendetaste beenden. Gehen Sie durch alle Felder, erstellen Sie Ihr Formularmodell und senden Sie es.

Quelle

2016-05-27 16:53:28

JavaScript-Objekt an DOM binden

Antwort

Verwandte Themen