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.

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.

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…

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.

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

Jag har under morgonen bara börjat med att placera några av de filerna där jag vill ha dem, skapat modulerna och läst på lite mer kring Require.js, som börjar klarna lite mer för mig nu. De filerna som har skapats har nu pushats upp till git och kan ses där.

Jag har nu kommit igång med mitt projekt, och fortsätter med att koda upp de första filerna (main.js, app.js och router.js) men jag upplever problem med require.js när jag ska definera inladdningsordning med hjälp av ”order!” eftersom jag får ett javascript fel som säger att den inte hittar order.js. Visst, den hittar inte filen, men jag har ju inte anget någonstans att den ska använda någon order.js fil? Eller måste man implementera en sådan om man vill använda ”order!” i sökvägen? Fundersam här. Edit: Japp, order.js är tydligen ett plugin som man ska ladda ned, men det framgår tyvärr inte på den platsen där jag läste om Require.js.

Update: 17.57
Nu har jag gjort ingången för applikationen, även läst på en del om hur man använder sig utav underscores templating egenskaper för att skapa olika templates. Jag har dock ännu inte testat modellerna utan jag har endast arbetat med att få ut olika vyer och grundläggande css. Har även skapat en template som innehåller ett formulär för att skapa en ny Task.

create-task-template
Templates i Underscore skrivs inom en script-tagg i head. Man sätter bara type till text/template och även ett ID för att enklare tageta templaten.

1
2
3
4
5
6
7
8

<script type="text/template" id="create-task-template">
<h2>Create Task</h2>
<form action="#" method="POST">
    <label for="task-content">Task:</label>
    <input type="text" name="task-content" />
    <input type="submit" name="task-submit" value="Add task" />
</form>
</script>

De som har tagit fram kommer nu att commitas till Github repositoriet. (Länk i sidebar).

Innehåll

1. Filstruktur
2. Moduler (AMD)
3. Laddning av moduler (Require.js)

Filstruktur

Då var det dags att bestämma hur filstrukturen i applikationen är tänkt att se ut. Egentligen så tycker jag inte att man behöver fundera speciellt mycket kring det här, huvudsaken tycker jag är att man bara delar upp de olika delarna av applikationen till passande mappar och filer. Figur 1 visar en liten illustration av hur jag har valt att dela upp min filstruktur.

Todo
|     docs
|     |
|     | // Documentation
|
|     js
|     |
|     |-- collections
|     |   | // collection modules.
|     |
|     |-- lib
|     |   | // javascript libs
|     |
|     |-- models
|     |   | // model modules
|     |
|     |-- views
|     |   | // views
|     |
|     |// app.js // main router
|
|-- index.html

Moduler

Jag har under morgonen nu suttit och läst igenom Writing modular javascript av Addy Osmani och försökt förstå hur man bäst kan uppnå loose coupling mellan de javascript moduler jag kommer att använda.

Vad jag kan läsa mig till, och förstå, så är AMD ett rekommenderat mönster för att skapa moduler där man kan definera beroenden (dependencies) och tillsammans med en script loader (t.ex. RequireJS eller curl.js) kan erbjuda dynamisk laddning av resurser (läs scripts). Läs mer min tänkta implementation av require.js.

Mönstret verkar ganska straight forward faktiskt, man använder define() för att definera en modul, innuti define så skapara du bara ett singelton objekt med alla dina funktioner som den här modulen ska ha och längst ner returnerar du singelton objektet.

Exempel på en modul

1
2
3
4
5
6
7
8
9
10

define(
    var myModule = {
        doStuff : function() {
            // Do something here.
        }
 
    }
 
    return myModule;
);

As clean and easy as that. Exemplet ovan är ett väldigt enkelt exempel som bara definerar en modul, men man kan även ange beroenden som Addi går igenom i sin artikel.

Exempel på en modul i Backbone

Här har jag försökt, efter att ha läst Addis artikel, försökt ge mig på att definera en modul enligt AMD som använder Backbone. Modulen är en model baserad på Task objektet som finns beskrivet här.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

define( 
  var TaskModel = Backbone.RelationalModel.extends({
    // Define the relations of the object using relational.
    relations : [
      {
        type : Backbone.HasOne,
        key : 'userId',
        relatedModel : 'User',
        includeInJSON : Backbone.Model.prototype.idAttribute,
        collectionType : 'UserCollection'
      },
      {
        type : Backbone.HasOne,
        key : 'categoryId',
        relatedModel : 'Category',
        includeInJSON : Backbone.Model.prototype.idAttribute,
        collectionType : 'CategoryCollection'
      }
    ],
 
    defaults : {
      taskId : null,
      content : null,
      time : null,
      completed : false,
      userId : null,
      categoryId : null  
    },
 
    initialize : function() {
      // Empty function for future need.
    },
 
    /**
      * @param {Array} attrs The attributes to validate.
      * @returns {String} If something does not validate, return string
      * (throw error in backbone.) does not run set or save on model.
      */
    validate : function( attrs ) {
      if (  attrs.taskId === null || attrs.content === null || 
            attrs.time === null || attrs.completed === null || 
            attrs.userId === null || attrs.categoryId === null ) {
             return "The task object does not validate."; 
      }
    }
  })
 
  return TaskModel;
);

Laddning av moduler (Require.js)

Jag förstår nu hur jag ska använda mig utav Require.js för att ladda in filerna vid behov vid körning av applikationen.

För att använda Require.js för att ladda in applikationen efter att Require.js är laddat, så använder man ett speciellt attribut på script-taggen som ser ut så här:

1

<script data-main="scripts/main" src="scripts/require.js"></script>

data-main attributet säger åt Require.js ska ladda filen main.js som finns i scripts katalogen i applikations katalogen efter att Require.js har laddats färdigt.

Sen är det bara att fortsätta och deklarera behov i resten av applikationen genom att använda sig utav Require.js API

Jag har valt att skriva alla dessa moduler i Backbone, och har endast identifierat de funktioner/metoder jag måste ha för respektive modul därför ser t.ex. alla vyer och collections likadana ut.

Collection

(Endast valt att definera vilken model respektive collection kommer använda).

TaskCollection

1
2
3

TaskCollection = Backbone.Collection.extends({
  model : Task,
});

UserCollection

1
2
3

UserCollection = Backbone.Collection.extends({
  model : User,
});

CategoryCollection

1
2
3

CategoryCollection = Backbone.Collection.extends({
  model : Category,
});

TodoEventCollection

1
2
3

TodoEventCollection = Backbone.Collection.extends({
  model : TodoEvent,
});

View

CreateUserView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CreateUserView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

CreateTaskView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

CreateTaskView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

CreateCategoryView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CreateCategoryView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns   CreateUser Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

CategoryView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

CategoryView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns   CreateUser Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

SingleCategoryView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

SingleCategoryView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns   CreateUser Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

EditTaskView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

EditTaskView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns   CreateUser Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

DeleteTaskView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

DeleteTaskView = Backbone.View.extends({
  el : '', // The corresponding DOM element for the view.
 
  initialize : function() {
    // On instanciating render.
    this.render();
  },
 
  events : {
    // Bind events to the view.  
  },
 
  /**
    * Renders the view.
    * @returns   CreateUser Returns this instance of the view.
    */
  render : function() {
    // Do some stuff before rendering view.
    return this;
  }
});

Router

App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

app = Backbone.Router.extends({
  routes : {
    // Eventually more routes will be defined.
    '' : 'main',
    '*actions' : 'default'
  },
 
  default : function( actions ) {
    // Show an error message if route is not defined.
  },
 
  main : function( ) {
    // Starts the main application.
    // Instanciate Model, view and collections.
 
    // Check if localStorage store(s) exists.
      // If not, create the storage.
      // Load createUserView to create a user.
 
    // Check if user exists.
      // If not, load createuserView to create a user.
 
    // Execute rest of application .. (Dont know details yet.)
  }
 
});

Bear CSS är en väldigt smidig tjänst jag just stötte på som skapar en grundläggande css mall för din webbplats. Det som du behöver göra är att du skapar din html sida med de taggar och element du tänkt använda dig utav, med dess attribut satta så som id och klasser. Nästa steg är helt enkelt att bara gå till bearcss.com och ladda upp din htmlfil. Bearcss går igenom filen med en php dom parser och skapar en css mall för dig som du kan ladda ned.

Väldigt smidig tjänst måste jag säga, snabbare ju upp uppstarten av ett projekt ganska mycket genom att man inte behöva skriva ”grund css:en” själv. Me like!

Task

1
2
3
4
5
6
7
8

Task = {
    taskId : 1, // Integer.
    content : "Go to school.", // String.
    time : {}, // Date.
    completed : false, // Boolean.
    userId : 1, // Integer.
    categoryId : 1 // Integer.
}

Task objektet är mer eller mindre huvud objektet i To-do applikationen då det kommer att innehålla själva ”att göra uppgiften”. Det kommer att innehålla ett taskId för enklare borttagning och editering av uppgiften. Content som självklart innehåller själva uppgiften. Time egenskapen ska innehålla en tidsstämpel t.ex. 2012-01-20 19:38. Completed som är en boolean som kommer att ändras om man har slutfört ( kryssat checkboxen) uppgiften och självklart ett userId  som kopplar en task till en viss användare. Task objektet innehåller även en egenskaper, categoryId, som kopplar tasken till en specifik kategori.

User

1
2
3
4

User = {
    userId : 2, // Integer.
    name : "Anders", // String.
}

User är, som namnet säger, ett objekt som har två egenskaper. Den första egenskapen, userId är ett Id för användaren och det andra är name som är namnet på användaren.

Category

1
2
3
4

Category = {
    categoryId : 1, // Integer.
    label : "Work", // String.
}

Category är ett objekt som även den endast innehåller två egenskaper, ett Id och en label som ska fungera som namnet för kategorin.

TodoEvent

1
2
3
4
5

TodoEvent = {
    name : "Deleted", // String.
    time : {}, // Date.
    userId : 1, // Integer.
}

 Event, är tänkt att användas som ett objekt för händelseloggen där den ska presentera senaste händelser t.ex att användaren Anders tog bort uppgiften ”Go to school”.

Backbone reprsentation av modellerna

Task

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Task = Backbone.RelationalModel.extends({
  // Define the relations of the object using relational.
  relations : [
    {
      type : Backbone.HasOne,
      key : 'userId',
      relatedModel : 'User',
      includeInJSON : Backbone.Model.prototype.idAttribute,
      collectionType : 'UserCollection'
    },
    {
      type : Backbone.HasOne,
      key : 'categoryId',
      relatedModel : 'Category',
      includeInJSON : Backbone.Model.prototype.idAttribute,
      collectionType : 'CategoryCollection'
    }
  ],
 
  defaults : {
    taskId : null,
    content : null,
    time : null,
    completed : false,
    userId : null,
    categoryId : null  
  },
 
  initialize : function() {
    // Empty function for future need.
  },
 
  /**
    * @param {Array} attrs The attributes to validate.
    * @returns {String} If something does not validate, return string
    * (throw error in backbone.) does not run set or save on model.
    */
  validate : function( attrs ) {
    if (  attrs.taskId === null || attrs.content === null || 
          attrs.time === null || attrs.completed === null || 
          attrs.userId === null || attrs.categoryId === null ) {
           return "The task object does not validate."; 
    }
  }
});

Category

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Category = Backbone.Model.extends({
  defaults : {
    categoryId : null,
    label : null;
  },
 
  initialize : function() {
    // Empty function for future need.
  },
 
  /**
    * @param {Array} attrs The attributes to validate.
    * @returns {String} If something does not validate, return string
    * (throw error in backbone.) does not run set or save on model.
    */
  validate : function( attrs ) {
    if (  attrs.categoryId === null || attrs.label === null ) {
           return "The category object does not validate."; 
    }
  }
});

User

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

User = Backbone.Model.extends({
  defaults : {
    userId : null,
    name : null
  },
 
  initialize : function() {
    // Empty function for future need.
  },
 
  /**
    * @param {Array} attrs The attributes to validate.
    * @returns {String} If something does not validate, return string
    * (throw error in backbone.) does not run set or save on model.
    */
  validate : function( attrs ) {
    if (  attrs.userId === null || attrs.name === null ) {
           return "The User object does not validate."; 
    }
  }
});

TodoEvent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

TodoEvent = Backbone.Model.extends({
  // Define the relations of the object using relational.
  relations : [
    {
      type : Backbone.HasOne,
      key : 'userId',
      relatedModel : 'User',
      includeInJSON : Backbone.Model.prototype.idAttribute,
      collectionType : 'UserCollection'
    }
  ],
 
  defaults : {
    name : null,
    time : null,
    userId : null
  },
 
  initialize : function() {
    // Empty function for future need.
  },
 
  /**
    * @param {Array} attrs The attributes to validate.
    * @returns {String} If something does not validate, return string
    * (throw error in backbone.) does not run set or save on model.
    */
  validate : function( attrs ) {
    if (  attrs.name === null || attrs.time === null || 
          attrs.userId === null ) {
           return "The ToDoEvent object does not validate."; 
    }
  }
});

Återigen, notera gärna att dessa modeller är framtagna för att jag ska ha en god förståelse över hur mina modeller/objekt kommer att se ut. Jag har även försökt att definera relationerna genom ”relations:” attributet i varje model. Som ni säkert ser så extendar modellerna med relationer from RelationlModel istället för från Model, detta är ett krav för att relationerna ska fungera i Backbone. Eftersom jag använder localStorage så kan modellerna komma att förändras, men eftersom backbone-localStorage.js skriver över Backbone.sync() så borde inte mycket alls förändras. Mer om förändringarna kommer att kommenteras i det här inlägget, men även i framtida inlägg som relaterar till ämnet/problemet/lösningen.