Pasenusių reikšmių valdymas naudojant „JavaScript“ ir „Blade“: „Laravel 10“ dinaminės įvesties formos

Senų formų duomenų tvarkymas naudojant „JavaScript“ „Laravel 10“.

Kuriant dinamines formas Laravel 10, vienas dažnas iššūkis yra išlaikyti vartotojo įvestį po patvirtinimo nesėkmės. Blade šablonuose tai paprastai galima valdyti naudojant senas () pagalbinė funkcija, kuri atkuria anksčiau įvestas reikšmes. Tačiau norint dinamiškai naudoti šią funkciją pridedant formos laukus su „JavaScript“, reikia specialaus tvarkymo.

Savo projekte susidūriau su šia problema kurdamas sistemą, leidžiančią vartotojams dinamiškai pridėti ir pašalinti atlygį. Nepavykus patvirtinti, formoje turi būti išsaugoti seni atlygio duomenys ir jie atitinkamai rodomi. Laravelio senas () funkcija gerai veikia „Blade“, tačiau derinti ją su „JavaScript“ pridėjimo logika gali būti sudėtinga.

Problemos esmė slypi tame, kaip Blade šablonai ir JavaScript interpretuoja duomenis skirtingai. Pridedant naujus elementus su „JavaScript“, turiu dinamiškai įterpti senas reikšmes, tačiau sintaksė ne visada yra paprasta. Jei to tinkamai neįgyvendinsite, iš naujo įkėlus puslapį prarandami svarbūs duomenys.

Šiame vadove sužinosite, kaip praktiškai naudoti senas () funkcija „JavaScript“ sugeneruotuose laukuose. Išnagrinėsime, kaip Laravel 10 projekte dinamiškai pridėti naujų įvesties duomenų ir užtikrinti tinkamą senų verčių išsaugojimą. Pasinerkime!

Dinaminis formų tvarkymas su senomis vertėmis Laravel 10

Pateiktuose scenarijuose pagrindinis iššūkis yra dinamiškai pridėti naujų atlygio formos laukų su galimybe išlaikyti senosios vertybės po patvirtinimo nesėkmės Laravelyje. Paprastai Laravel senas () Pagalbininkas nuskaito anksčiau įvestas reikšmes, kai formos pateikimas nepavyksta, tačiau tai dažnai būna sunku pridedant elementus naudojant „JavaScript“. Sprendimas yra derinant „Blade“. @json() direktyvą su JavaScript, leidžiančią senus įvesties duomenis perduoti tiesiai į dinamiškai generuojamus laukus.

Funkcija addMoreItem() yra šio požiūrio pagrindas. Jis naudoja „JavaScript“, kad pridėtų naujų įvesties laukų prie kiekvieno atlygio. Prieš pridėdami laukus patikriname, ar nėra senų naudojamų reikšmių @json(senas('atlygis')). Tai konvertuoja senas įvesties reikšmes iš PHP pusės į JavaScript objektą, kurį vėliau galima pakartoti naudojant Objektas.įrašai(). Šis metodas leidžia peržiūrėti kiekvieną atlygio įrašą ir įterpti su juo susijusias reikšmes į dinamiškai sukurtus formos elementus.

Scenarijus taip pat naudoja insertAdjacentHTML() metodas, kuris įterpia HTML turinį konkrečioje vietoje, palyginti su esama forma. Tai labai svarbu norint pridėti naujų atlygio elementų neatnaujinant puslapio. Pavyzdžiui, pridedant naują atlygį, scenarijus sukuria naują formos lauką su atitinkamomis įvesties reikšmėmis ir prideda jį prie formos konteinerio. The senas () funkcija užtikrina, kad nepavykus patvirtinti formos anksčiau įvesti duomenys būtų rodomi vartotojui atgal.

Galiausiai, vieneto testavimas yra labai svarbus norint patvirtinti šių scenarijų veikimą. Šiuo atveju assertSessionHasOldInput() ir assertSessionHasErrors() yra naudojami PHPUnit testuose, siekiant užtikrinti, kad Laravel teisingai saugo ir nuskaito senus įvesties duomenis. Šie testai patvirtina, kad atlygis duomenys išsaugomi seanso po nesėkmingo patvirtinimo, užtikrinant, kad dinaminiai formos laukai išlaikytų ankstesnes įvesties reikšmes vėlesniais formos įkėlimais. Šis „JavaScript“ ir „Blade“ derinys užtikrina sklandžią vartotojo patirtį dirbant su sudėtingomis, dinamiškomis „Laravel“ formomis.

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

Dinaminio formų tvarkymo optimizavimas Laravel naudojant Blade ir JavaScript

„Laravel“ dinamiškai tvarkant formų įvestis, ypač naudojant „JavaScript“, reikia atidžiai stebėti, kaip „Blade“ ir „JavaScript“ sąveikauja. Pagrindinis dažnai nepastebimas aspektas yra formos duomenų laikymas po patvirtinimo klaidų. Naudojant senas () Pagalbinė funkcija, Laravel suteikia paprastą būdą iš naujo užpildyti įvesties laukus, tačiau norint įtraukti šią funkciją į dinamiškai pridedamus elementus, reikia labiau apgalvoto požiūrio. Tai ypač aktualu dirbant su masyvais ar kolekcijomis, pvz., apdovanojimais, kai kiekvienas elementas turi išsaugoti savo duomenis.

Galingas šio iššūkio sprendimas yra Laravel's derinimas @json() direktyva su JavaScript. The @json() direktyva leidžia konvertuoti serverio duomenis į formatą, kurį „JavaScript“ gali suprasti, o tai labai svarbu norint perduoti senas reikšmes atgal į sąsają. Susiedami šias reikšmes į naujai pridėtus formos laukus, galite užtikrinti, kad naudotojai nepraras progreso, jei įvyktų patvirtinimo klaida. Ši technika išnaudoja „Blade“ šablonų atvaizdavimo galią, taip pat suteikia „JavaScript“ pagrįsto formų valdymo lankstumo.

Svarbu ne tik atkurti senas reikšmes, bet ir atsižvelgti į klaidų tvarkymą ir įvesties patvirtinimą. Be to senas (), suteikia Laravel @error() kad šalia konkrečių laukų būtų rodomi patvirtinimo pranešimai, todėl vartotojams būtų lengviau suprasti, kas nutiko. Abiejų komandų integravimas užtikrina sklandžią patirtį, kai nepavyksta patvirtinti formų ir vartotojams reikia pataisyti įvestį. Derindami „Blade“ funkcijas su „JavaScript“ lankstumu, galite išlaikyti dinamišką, tačiau stabilią „Laravel“ programų vartotojo patirtį.