Lesson 10

StydeNet · May 12, 2016 · 6ead135 · 6ead135
1 parent 2113411
commit 6ead135
Show file tree

Hide file tree

Showing 3 changed files with 10,092 additions and 0 deletions.
diff --git a/lesson10/index.html b/lesson10/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Styde.net / Curso de VueJS / Lección 10</title>
+
+        <!-- Bootstrap -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">        
+    </head>
+    <body>
+      <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+              <h1>Styde.net / Curso de VueJS / Lección 10</h1>
+
+              <table class="table table-striped">
+                <tr>
+                    <th>Categoría</th>
+                    <th>Nota</th>
+                    <th width="50px">&nbsp;</th>
+                </tr>
+                <tr v-for="note in notes" is="note-row" :note.sync="note" :categories="categories"></tr>
+                <tr>
+                    <td><select-category :categories="categories" :id.sync="new_note.category_id"></select-category></td>
+                    <td><input type="text" v-model="new_note.note" class="form-control"></td>
+                    <td>
+                        <a href="#" @click="createNote()">
+                            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                        </a>
+                    </td>
+                </tr>
+              </table>
+          </div>
+      </div>
+
+      <pre>{{ $data | json }}</pre>
+
+      <template id="select_category_tpl">
+        <select v-model="id" class="form-control">
+            <option value="">- Selecciona una categoría</option>
+            <option v-for="category in categories" :value="category.id">
+                {{ category.name }}
+            </option>
+        </select>
+      </template>
+
+      <template id="note_row_tpl">
+        <tr>
+            <template v-if="! editing">
+                <td>{{ note.category_id | category }}</td>
+                <td>{{ note.note }}</td>
+                <td>
+                    <a href="#" @click="edit()"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
+                    <a href="#" @click="remove()">
+                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+                    </a>
+                </td>
+            </template>
+            <template v-else>
+                <td>
+                    <select-category :categories="categories" :id.sync="note.category_id"></select-category>
+                </td>
+                <td><input type="text" v-model="note.note" class="form-control"></td>
+                <td><a href="#" @click="update()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></td>
+            </template>
+        </tr>
+      </template>
+
+      <script src="vue.js"></script>
+      <script src="main.js"></script>
+    </body>
+</html>
diff --git a/lesson10/main.js b/lesson10/main.js
@@ -0,0 +1,96 @@
+function findById(items, id) {
+    for (var i in items) {
+        if (items[i].id == id) {
+            return items[i];
+        }
+    }
+
+    return null;
+}
+
+Vue.filter('category', function (id) {
+    var category = findById(this.categories, id);
+
+    return category != null ? category.name : '';
+});
+
+Vue.component('select-category', {
+    template: "#select_category_tpl",
+    props: ['categories', 'id']
+});
+
+Vue.component('note-row', {
+    template: "#note_row_tpl",
+    props: ['note', 'categories'],
+    data: function() { 
+        return {
+            editing: false
+        };
+    },
+    methods: {
+        remove: function () {
+            this.$parent.notes.$remove(this.note);
+        },
+        edit: function () {
+            this.editing = true;
+        },
+        update: function () {
+            this.editing = false;
+        }
+    }
+});
+
+var vm = new Vue({
+    el: 'body',
+    data: {
+        new_note: {
+            note: '',
+            category_id: ''
+        },
+        notes: [
+            {
+                note: 'Laravel 5.1 es LTS',
+                category_id: 1
+            },
+            {
+                note: 'v-for es la directiva que utilizamos para iterar una lista',
+                category_id: 2
+            },
+            {
+                note: '@click se utiliza como un alias de v-on:click',
+                category_id: 2
+            },
+            {
+                note: 'Regístrate hoy en styde.net y obtén acceso a todos nuestros cursos',
+                category_id: 3
+            }
+        ],
+        categories: [
+            {
+                id: 1,
+                name: 'Laravel'
+            },
+            {
+                id: 2,
+                name: 'Vue.js'
+            },
+            {
+                id: 3,
+                name: 'Publicidad'
+            }
+        ]
+    },
+    methods: {
+        createNote: function () {
+            this.notes.push(this.new_note);
+
+            this.new_note = {note: '', category_id: ''};
+        }
+    },
+    filters: {
+    }
+});
+
+
+
+