escaping fields autocomplete

app/scripts/views/fields/field-view-autocomplete.js

@@ -1,6 +1,6 @@
 import { Keys } from 'const/keys';
 import { FieldViewText } from 'views/fields/field-view-text';
-import { escape } from 'util/fn';
+import completionsTemplate from 'templates/details/fields/completions.hbs';
 
 class FieldViewAutocomplete extends FieldViewText {
     hasOptions = true;
@@ -10,7 +10,7 @@ class FieldViewAutocomplete extends FieldViewText {
             this.autocomplete.remove();
             this.autocomplete = null;
         }
-        delete this.selectedCopmletionIx;
+        delete this.selectedCompletionIx;
         super.endEdit(newVal, extra);
     }
 
@@ -24,7 +24,7 @@ class FieldViewAutocomplete extends FieldViewText {
             left: fieldRect.left,
             width: fieldRect.width - 2
         });
-        delete this.selectedCopmletionIx;
+        delete this.selectedCompletionIx;
         this.autocomplete.mousedown(this.autocompleteClick.bind(this));
         if (this.input.val()) {
             this.autocomplete.hide();
@@ -60,40 +60,29 @@ class FieldViewAutocomplete extends FieldViewText {
                 break;
             }
             default:
-                delete this.selectedCopmletionIx;
+                delete this.selectedCompletionIx;
         }
         super.fieldValueKeydown(e);
     }
 
     moveAutocomplete(next) {
         const completions = this.model.getCompletions(this.input.val());
-        if (typeof this.selectedCopmletionIx === 'number') {
-            this.selectedCopmletionIx =
-                (completions.length + this.selectedCopmletionIx + (next ? 1 : -1)) %
+        if (typeof this.selectedCompletionIx === 'number') {
+            this.selectedCompletionIx =
+                (completions.length + this.selectedCompletionIx + (next ? 1 : -1)) %
                 completions.length;
         } else {
-            this.selectedCopmletionIx = next ? 0 : completions.length - 1;
+            this.selectedCompletionIx = next ? 0 : completions.length - 1;
         }
         this.updateAutocomplete();
     }
 
     updateAutocomplete() {
         const completions = this.model.getCompletions(this.input.val());
-        const completionsHtml = completions
-            .map((item, ix) => {
-                const sel =
-                    ix === this.selectedCopmletionIx
-                        ? 'details__field-autocomplete-item--selected'
-                        : '';
-                return (
-                    '<div class="details__field-autocomplete-item ' +
-                    sel +
-                    '">' +
-                    escape(item) +
-                    '</div>'
-                );
-            })
-            .join('');
+        const completionsHtml = completionsTemplate({
+            completions,
+            selectedIx: this.selectedCompletionIx
+        });
         this.autocomplete.html(completionsHtml);
         this.autocomplete.toggle(!!completionsHtml);
     }

app/scripts/views/fields/field-view-tags.js

@@ -1,5 +1,6 @@
 import { FieldViewText } from 'views/fields/field-view-text';
 import { escape } from 'util/fn';
+import tagsTemplate from 'templates/details/fields/tags.hbs';
 
 class FieldViewTags extends FieldViewText {
     hasOptions = false;
@@ -12,6 +13,10 @@ class FieldViewTags extends FieldViewText {
         return value ? value.join(', ') : '';
     }
 
+    getTextValue() {
+        return this.value ? this.value.join(', ') : '';
+    }
+
     valueToTags(val) {
         const allTags = {};
         this.model.tags.forEach(tag => {
@@ -74,11 +79,7 @@ class FieldViewTags extends FieldViewText {
 
     setTags() {
         const availableTags = this.getAvailableTags();
-        const tagsHtml = availableTags
-            .map(tag => {
-                return '<div class="details__field-autocomplete-item">' + escape(tag) + '</div>';
-            })
-            .join('');
+        const tagsHtml = tagsTemplate({ tags: availableTags });
         this.tagsAutocomplete.html(tagsHtml);
         this.tagsAutocomplete.toggle(!!tagsHtml);
     }

app/scripts/views/fields/field-view.js

@@ -9,7 +9,7 @@ import { Locale } from 'util/locale';
 import { AutoType } from 'auto-type';
 import { PasswordPresenter } from 'util/formatting/password-presenter';
 import { DropdownView } from 'views/dropdown-view';
-import template from 'templates/details/field.hbs';
+import template from 'templates/details/fields/field.hbs';
 
 class FieldView extends View {
     template = template;

app/scripts/views/generator-view.js

@@ -133,7 +133,7 @@ class GeneratorView extends View {
         const val = this.valuesMap[e.target.value];
         if (val !== this.gen.length) {
             this.gen.length = val;
-            this.$el.find('.gen__length-range-val').html(val);
+            this.$el.find('.gen__length-range-val').text(val);
             this.optionChanged('length');
             this.generate();
         }

app/templates/details/fields/completions.hbs

@@ -0,0 +1,5 @@
+{{#each completions as |completion|}}
+    <div class="details__field-autocomplete-item {{#ifeq @index ../selectedIx}}details__field-autocomplete-item--selected{{/ifeq}}">
+        {{completion}}
+    </div>
+{{/each}}

app/templates/details/fields/tags.hbs

@@ -0,0 +1,5 @@
+{{~#each tags as |tag|~}}
+    <div class="details__field-autocomplete-item">
+        {{~tag~}}
+    </div>
+{{~/each~}}