Nu har jag gjort en ny commit till giten. Jag har hittat en lösning för hur jag ska filtrera varje kategoriers task och det var inte alls så svårt, dock vet jag inte om det är det bästa sättet att göra på. Detta har jag åstadkommit genom att använda _.filter() – funktion på detta vis:
1
2
3
4
5
| var school = _.filter( this.taskCollection.models, function( task ) {
if ( task.attributes.category.attributes.label == 'School') {
return task.attributes.category.attributes.label;
}
}); |
Jag är nästan säker på att det är rätt lösning för att filtrera ut ur en collection, men frågan är om jag gör rätt när jag ska rendera ut dessa i en annan vy. Jag har gjort som så att jag har en template som skriver ut en hållare för varje kategori (Se längre ned, kodsnutt) , i sin tur så är det en annan vy som renderar ut innehållet eftersom jag först måste ha ett element att lagra innehållet i. Templaten renderar en div-tagg med en todo-holder klass och lägger på en klass med respektive kategori label.
1
2
3
4
5
6
7
| <!-- TodoList template -->
<script type="text/template" id="todo-list-template">
<% _.each( categories, function( categories ) { %>
<div class="todo-holder <%= categories.attributes.label %>">
</div>
<% }); %>
</script> |
I sin tur så är det ”views/main/todo.js” som renderar ut själva innehållet från varje filtrerad task (kategori). Saken jag är osäker på är om jag gör rätt, för att jag i todoholder-vyn instansierar todoView och anropar den flera gånger (se kodsnutt) för att rendera varje kategoris uppgifter. Till TodoView så skickar jag med en class (samma klass som föregående template skapar) som används för att hålla reda på vilket element uppgifterna ska skrivas ut i. Nästa argument är Task som innehåller de filtrerade uppgifterna efter kategori.
1
2
3
4
5
6
7
8
| var todoView = new TodoView( ".School", school );
todoView.render();
todoView = new TodoView( ".Work", work );
todoView.render();
todoView = new TodoView( ".Private", privateTodo );
todoView.render(); |
Ful kod? Dont know. Det får vara så här fram till att jag hittar en enklare/bättre lösning.
Idag har det varit, nästan en hel dag med Todo applikationen. Fått en hel del gjort, och felsökt ännu mer nästan. Det har dykt upp lite kluriga saker, hade ”stora” problem med att få relation att fungera mellan TaskModel, UserModel och CategoryModel men efter några timmars felsökande så lokaliserades problemet. (Som jag tyvärr nu glömt bort.. För mycket kodande och felsökning idag).
Det går nu i alla fall att skapa en Task, med tillhörande egenskaper/attribut. Modellerna har förändrats lite då jag istället för att ha egna ID på objekten så låter jag Backbone ta hand om detta, det känns mycket smidigare och tror även att det blir enklare i längden.
Upplevde även en del problem med TaskCollection, av någon anledning så kan jag inte använda collection.add( model ) för att lägga till en Task til Collectionen, utan var återigen tvungen att gå tillbaka till Create (som i princip är samma sak) skillnaden är väl att man inte riktigt kan fånga valideringsfel på samma sätt men jag tror att även detta är löst.
Har även fått arbeta en liten liten del med events och hur de triggas och fungerar, känns ganska basic måste jag säga.
Imorgon väntar nya äventry, lets roll.
Idag har jag haft ett trevligt samtal med David kring lite placering av instansitiering av moduler och var de bör ligga. Vi kom fram till att det bästa sättet, för min applikation, är att låta routern instansiera de moduler (främst collections) som kommer att användas ute i vyerna för att sedan kunna skicka med dessa till vyerna där de ska användas. Detta ska underlätta så att vyerna och övriga delar av applikationen jobbar mot samma instans av collections-objektena vilket är väldigt bra.
En sak som är värd att nämna, placera aldrig Backbone.history.start() innuti din router, då kan lite allt möjligt hända i applikationen som man inte förstår sig på. Backbone.history.start() ska komma efter att huvud routern har initiserats och inget annat.
Just nu så har jag lite klurigheter med att få relational att fungera, inte riktigt så påläst inom det så måste läsa på lite mer kring hur man skapar ett nytt objekt som har en relation till ett annat, för tydligen fungerar inte nedanstående kodstycke:
1
2
3
4
5
6
7
8
| this.taskCollection.create({
taskId : ( this.taskCollection.lenth + 1 ),
content : taskContent,
time : new Date(),
completed : false,
userId : this.userCollection.at(0).attributes.userId, // Relation mot User.
categoryId : taskCategory // Relation mot Category.
}); |
Vilket gör att jag får följande varning i consolen:
1
| Relation=child; no instance, key or relatedModel ( child, "userId", null) |
fortsättning följer…
Nu är jag tillbaka efter några dagars frånvaro från datorn generellt. Idag har jag tänkt mig läsa på ordentligt i hur man använder backbone.localStorage adaptern istället för en databas.
Det som framfår i informationen som jag har tagit del utav är att man anger i en collection/model att den ska använda sig utav en viss ”store” (Läs på mer kring Web storage/localStorage här.)
Exempelvis så här:
1
2
3
4
5
| todoList = Backbone.Collection.extend({
model : Todo,
localStorage : new Store("Todos")
...
}); |
Jag försöker få det hela att fungera, men vet inte riktigt vart och hur jag ska ladda modellerna/collections för att det ska vara rätt. Måste ta och fråga David kring det här, för jag börjar bli lite osäker. Teoretiskt så borde jag inte skicka med något till andra moduler utan ange den första modulen som ett beroende till den andra modulen, då tror jag att jag är på rätt väg.
Sättet man sparar ner modellen till lagringen(localStorage) är helt enkelt genom att anropa model.save() och så körs Backbone.sync() som sparar ner informationen till databasen/lagringen. Det smidiga med olika lösningar för lagring när det gäller Backbone är att man enkelt kan läsa in en adapter t.ex. localStorage och inte behöva ändra någonting i sin kod förutom att ange localStorage i modellen/collectionen att man ska använda localStorage, resten sköter sig själv genom att localStrorage skriver över Backbone.sync() vilket är riktigt smidigt.
– Update 19.54:
Nu har jag lekt lite med localStorage och ser att det fungerar väldigt smidigt. Jag har lärt mig hur jag ska göra för att utföra CRUD mot Collectionen. Kontrollerar även i collectionen om de tre standard kategorierna finns ( Work, School och Private), finns inte dessa så skapas dom när collectionen instansierar.
Nästa steg är att kunna få ut alla skapade kategorier i dropdown listan så att de kan väljas, men det är på templating/underscore delen så det fortsätter jag med imorgon.
Sammanfattning
För en kort sammanfattning så har jag idag lärt mig hur jag kan använda localStorage och collections/modeller för att spara data till klientens lagring. Att implementera detta är väldigt smidigt och väl dokumenterat (om man läser all dokumentation, note to self) och ett väldigt smidigt sätt att t.ex erbjuda användaren offline-funktionalitet av appen som sedan, när användaren är online, syncas mot en server för lagring. Så, +1 för localStorage och hur väl bra och enkelt det är gjort som en adapter för backbone.
Nu på morgonen har jag haft samtal med David angående grunden i min applikation. Vi pratade bland annat om ämnen som Requrie.js och hur det fungerar, vi tog upp Events i Backbone men även lite best practice kring vart collections ska laddas in och så vidare.
Under dagen har jag tänkt att försöka sätta mig in i hur jag ska gå tillväga för att använda mig utav localStorage (Backbone.localStorage) och testa det. När jag har förstått detta så tänkte jag mig börja skapa första vyn för applikationen, där det först ska kontrolleras om det finns någon användare för applikationen. Finns det ingen användare så ska ett formulär presenteras där användaren får skapa sig en användare. (Applikationen ska vara begränsad på så sätt att en installation bara kan ha en användare).