Turinys
Nusprendę, ką maršrutizatorius mūsų programėlėje Backbone.js, turime priversti jį klausytis URL pakeitimų, tai yra, kai mūsų naudotojas įveda vertę su atitinkama maiša, pvz. aplicacion.com/#ruta Tai leis ne tik klausytis, bet ir pažymėti programą.Stuburas.istorija
Kaip paaiškinome, tai yra elementas, dėl kurio mūsų programa pradeda veikti klausytis, kaip pasikeičia URL, naudojant maišas, svarbu tai, kad tai taip pat padeda mums sukurti programą, kurioje gali būti sekcijų, saugomų kaip žymeklis arba skirtukas vartotojas, taip sukurdami skyrius, prie kurių galima tiesiogiai prieiti, nesukeliant daugybės problemų.
Kaip naudoti?Norėdami naudoti Stuburas.istorija mes turime tai padaryti, kai apibrėžiame objektą, kuris inicijuoja mūsų maršrutizatorius ir už tai mes tai darome .start () metodas.
Pažvelkime į šį kodą, kaip šis veiksmas būtų:
var myRouter = naujas exampleRouter (); Backbone.history.start ();
Šiuo atveju turime a Maršrutizatorius paskambino exampleRouter kuris yra priskirtas kintamajam miRouter, kaip nurodėme atlikę šį veiksmą, kad naudojame .start () metodas kaip matome paskutinėje pavyzdžio eilutėje.
Jei vykdysime šiuos veiksmus Maršrutizatorius Savo žiniatinklio serveryje galime pamatyti, kaip mums veikia tai, ką paaiškinome:
var exampleRouter = Backbone.Router.extend ({route: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Mes pasiekėme maršrutizatoriaus testą");}, searchQuestion: function (užklausa, puslapis) {var page_no = page || 1; console.log ("The page no:" + page_no + " iš paieškos, kurioje yra žodis: " + užklausa);}, defaultRoute: function (other) {console.log ('Resursas:' + kitas + 'neegzistuoja');}}); var myRouter = naujas exampleRouter (); Backbone.history.start (); Toliau pateiktame paveikslėlyje pažiūrėkime, kaip tai atsitinka, kai pasiekiame paieškos kelią ir perduodame jam norimus parametrus:
Šis.navigacijos metodas
Šis metodas mums leidžia atnaujinkite programos URL iš metodo, tai padeda mums išvengti pakartotinio puslapio įkėlimo ir taip neprarasti vieno puslapio programos tikslo. Išsami informacija yra ta, kad šis metodas neleidžia jam eiti per maršrutizatorių, todėl turime tai padaryti aiškiai, pažiūrėkime pavyzdžius:
1- Nepergyvenant maršrutizatorius:
viewTask: function (id) {console.log ("Peržiūrėti prašomą užduotį."); this.navigate ("task /" + id + ' / edit'); // atnaujinti URL, bet jis neina per maršrutizatorių}, 2- Su taisymu, dėl kurio jis eina per maršrutizatorius:
viewTask: function (id) {console.log ("Peržiūrėti prašomą užduotį."); this.navigate ("task /" + id + ' / edit', {trigger: true}); // atnaujinti URL, bet jis neina per maršrutizatorių}, Tokiu būdu mes jau pasiekiame tikslą iš programos pakeisti URL ir iškart eikite per maršrutizatorių.
Šios pamokos pabaigoje pamatėme, kad naudinga pasiekti mūsų programą per draugiškus URL, nes tai padeda mums padaryti ją lengviau skaitomą paieškos sistemoms ir vartotojams, taip pagerinant SEO.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
