<commit_before>---
date: '2017-11-14 12:51 +0100'
published: true
title: Backbone - Todos  app
---
*Den här artikeln är en översättning och försök till förenkling av kapitlet [Exercise 1: Todos - Your First Backbone.js App](https://addyosmani.com/backbone-fundamentals/#exercise-1-todos---your-first-backbone.js-app)*

Att bygga en Todo List är ett bra sätt att lära sig Backbone-konventioner. Det är en relativt enkel applikation, men tekniska utmaningar kring bindande, bestående modelldata, routing och templering ger möjligheter att illustrera vissa kärnfunktioner.

![todo app](https://addyosmani.com/backbone-fundamentals/img/todos_a.png)

låt oss överväga applikationens arkitektur på en hög nivå. Vi behöver:
* en Todo-modell för att beskriva enskilda todo-objekt
* en TodoList kollektion för att lagra och persistera todos
* ett sätt att skapa todos
* ett sätt att visa en lista över todos
* ett sätt att redigera befintliga todos
* ett sätt att markera en todo som färdigställd
* ett sätt att ta bort todos
* ett sätt att filtrera de objekt som har slutförts eller är kvar

I huvudsak är dessa funktioner klassiska CRUD-metoder. 

## Statisk HTML & CSS

Börja med att clona mitt repo [DevelDevelStrap](https://github.com/DevelDoe/DevelDevelStap). Repot innehåller ett grundläggande html fil och tillhörande css filer. 

Modifiera sedan vår `html.index` efter de behov som vi har för vår applikation samt scripter för  de grundläggande applikationsberoende: jQuery, Underscore, Backbone.js, Handlebars och Backbone LocalStorage-adaptern.

```html
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>

    <title>DevelDevelStrap</title>
    <meta name=description content="Used for quickly strap up development projects.">
    <meta name=author content="DevelDoe">

    <meta http-equiv=X-UA-Compatable content="IE=edge,chrome=1">
    <meta name=viewport content="width=device-width, initial-scale=1.0">
    <link rel=stylesheet href="assets/css/reset.css"/>
    <link rel=stylesheet href="assets/css/fonts.css"/>
    <link rel=stylesheet href="assets/css/default.css">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>
<body id=background>
    <span id="todo-app">
        <header id=header>
            <h2>todos</h2>
        </header>
        <section id="content">
                <input id="new-todo" placeholder="What needs to be done?" autofocus>
                <label for="toggle-all">Mark all as completed</label>
                <input id="toggle-all" type="checkbox">
                <ul id="todo-list"></ul>
        </section>
        <footer id=footer>
            <h4>made by Develdoe</h4>
        </footer>               
    </span>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/handlebars.min.js"></script>
    <script src="lib/underscore-min.js"></script>
    <script src="lib/backbone-min.js"></script>
    <script src="lib/backbone.localStorage.js"></script>

    <script src="models/Todo.js"></script>
    <script src="collections/Todos.js"></script>
    <script src="views/Todos.js"></script>
    <script src="views/AppView.js"></script>
    <script src="routers/router.js"></script>
    <script src="app.js"></script>
```

Förutom de ovan nämnda beroenden, notera att några andra applikationsspecifika filer också laddas. Dessa är organiserade i mappar som representerar deras ansvarsansvar: modeller, vyer, kollektioner och routrar. En app.js-fil är närvarande för att hämta centralinitieringskoden.

Obs! Om du vill följa med, skapa en katalogstruktur enligt vad som visas i index.html:

* Hämta jQuery, Underscore, Backbone, Handlebars och Backbone LocalStorage från sina respektive webbplatser och placera dem under lib/
* Skapa katalogerna models, collections, views, and routers

### Templates

För att slutföra index.html måste vi lägga till mallarna som vi ska använda för att dynamiskt skapa HTML genom att injicera modelldata i deras platshållare. Ett sätt att inkludera mallar på sidan är att använda egna skript taggar. Dessa utvärderas inte av webbläsaren, som bara tolkar dem som vanlig text. Handlebars templering kan sedan komma åt mallarna, vilket renderar fragment av HTML.

Vi börjar genom att fylla i  #item-template som används för att visa enskilda todo-objekt längst ned ovan för #todo-app avslutande `</span>` node. 

```html
<script type="text/template" id="item-template">
    <div class="view">
        <input class="toggle" type="checkbox" {{#if competed}} checked="checked" {{/if}}>
        <label>{{title}}</label>
        <button class="destroy"></button>
    </div>
    <input class="edit" value="{{title}}">
</script>
```

Malltaggen i ovanstående markering, till exempel {{#if}}  och {{, är specifika för Handlebars.js och dokumenteras på handlebars-webbplatsen. I dina egna applikationer har du ett urval av mallbibliotek, t.ex. Mustache eller Underscore.

Vi måste också definiera  #stats-template som vi ska använda för att fylla i sidfoten.

```js
<script type="text/template" id="stats-template">
    <span id="todo-count">
        <strong>{{ remaining }}</strong>
        {{#if this.remaining === 1}} {{ this.item }} {{#else}} {{ this.items }} {{/if}} left
    </span>
    <ul id="filters">
        <li><a class=selected href=#>All</a>
        <li><a href=#/active>Active</a>
        <li><a href=#/completed>Completed</a>
    </ul>
    {{#if this.completed}} <button id="clear-completed">Clear Completed {{ this.completed }}</button> {{/if}}
</script>>
```
<commit_msg>Update 2017-11-14-backbone-todos-app.md<commit_after>---
date: '2017-11-14 12:51 +0100'
published: true
title: Backbone - Todos  app
---
*Den här artikeln är en översättning och försök till förenkling av kapitlet [Exercise 1: Todos - Your First Backbone.js App](https://addyosmani.com/backbone-fundamentals/#exercise-1-todos---your-first-backbone.js-app)*

Att bygga en Todo List är ett bra sätt att lära sig Backbone-konventioner. Det är en relativt enkel applikation, men tekniska utmaningar kring bindande, bestående modelldata, routing och templering ger möjligheter att illustrera vissa kärnfunktioner.

![todo app](https://addyosmani.com/backbone-fundamentals/img/todos_a.png)

låt oss överväga applikationens arkitektur på en hög nivå. Vi behöver:
* en Todo-modell för att beskriva enskilda todo-objekt
* en TodoList kollektion för att lagra och persistera todos
* ett sätt att skapa todos
* ett sätt att visa en lista över todos
* ett sätt att redigera befintliga todos
* ett sätt att markera en todo som färdigställd
* ett sätt att ta bort todos
* ett sätt att filtrera de objekt som har slutförts eller är kvar

I huvudsak är dessa funktioner klassiska CRUD-metoder. 

## Statisk HTML & CSS

Börja med att clona mitt repo [DevelDevelStrap](https://github.com/DevelDoe/DevelDevelStap). Repot innehåller ett grundläggande html fil och tillhörande css filer. 

Modifiera sedan vår `html.index` efter de behov som vi har för vår applikation samt scripter för  de grundläggande applikationsberoende: jQuery, Underscore, Backbone.js, Handlebars och Backbone LocalStorage-adaptern.

```html
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>

    <title>DevelDevelStrap</title>
    <meta name=description content="Used for quickly strap up development projects.">
    <meta name=author content="DevelDoe">

    <meta http-equiv=X-UA-Compatable content="IE=edge,chrome=1">
    <meta name=viewport content="width=device-width, initial-scale=1.0">
    <link rel=stylesheet href="assets/css/reset.css"/>
    <link rel=stylesheet href="assets/css/fonts.css"/>
    <link rel=stylesheet href="assets/css/default.css">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>
<body id=background>
    <span id="todo-app">
        <header id=header>
            <h2>todos</h2>
        </header>
        <section id="content">
                <input id="new-todo" placeholder="What needs to be done?" autofocus>
                <label for="toggle-all">Mark all as completed</label>
                <input id="toggle-all" type="checkbox">
                <ul id="todo-list"></ul>
        </section>
        <footer id=footer>
            <h4>made by Develdoe</h4>
        </footer>               
    </span>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/handlebars.min.js"></script>
    <script src="lib/underscore-min.js"></script>
    <script src="lib/backbone-min.js"></script>
    <script src="lib/backbone.localStorage.js"></script>

    <script src="models/Todo.js"></script>
    <script src="collections/Todos.js"></script>
    <script src="views/Todos.js"></script>
    <script src="views/AppView.js"></script>
    <script src="routers/router.js"></script>
    <script src="app.js"></script>
```

Förutom de ovan nämnda beroenden, notera att några andra applikationsspecifika filer också laddas. Dessa är organiserade i mappar som representerar deras ansvarsansvar: modeller, vyer, kollektioner och routrar. En app.js-fil är närvarande för att hämta centralinitieringskoden.

Obs! Om du vill följa med, skapa en katalogstruktur enligt vad som visas i index.html:

* Hämta jQuery, Underscore, Backbone, Handlebars och Backbone LocalStorage från sina respektive webbplatser och placera dem under lib/
* Skapa katalogerna models, collections, views, and routers

### Templates

För att slutföra index.html måste vi lägga till mallarna som vi ska använda för att dynamiskt skapa HTML genom att injicera modelldata i deras platshållare. Ett sätt att inkludera mallar på sidan är att använda egna skript taggar. Dessa utvärderas inte av webbläsaren, som bara tolkar dem som vanlig text. Handlebars templering kan sedan komma åt mallarna, vilket renderar fragment av HTML.

Vi börjar genom att fylla i  #item-template som används för att visa enskilda todo-objekt längst ned ovan för #todo-app avslutande `</span>` node. 

```html
<script type="text/template" id="item-template">
    <div class="view">
        <input class="toggle" type="checkbox" {{#if competed}} checked="checked" {{/if}}>
        <label>{{title}}</label>
        <button class="destroy"></button>
    </div>
    <input class="edit" value="{{title}}">
</script>
```

Malltaggen i ovanstående markering, till exempel {{#if}}  och {{, är specifika för Handlebars.js och dokumenteras på handlebars-webbplatsen. I dina egna applikationer har du ett urval av mallbibliotek, t.ex. Mustache eller Underscore.

Vi måste också definiera  #stats-template som vi ska använda för att fylla i sidfoten lägg denna under den föregående.

```js
<script type="text/template" id="stats-template">
    <span id="todo-count">
        <strong>{{ remaining }}</strong>
        {{#if this.remaining === 1}} {{ this.item }} {{#else}} {{ this.items }} {{/if}} left
    </span>
    <ul id="filters">
        <li><a class=selected href=#>All</a>
        <li><a href=#/active>Active</a>
        <li><a href=#/completed>Completed</a>
    </ul>
    {{#if this.completed}} <button id="clear-completed">Clear Completed {{ this.completed }}</button> {{/if}}
</script>>
```

{'fraction_non_alphanumeric': 0.12437455325232309, 'fraction_numerical': 0.006611865618298785, 'mean_word_length': 3.8224903059026283, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 183, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '353388', 'n_tokens_mistral': 3887, 'n_tokens_neox': 3758, 'n_words': 1118}