3 files changed, 54 insertions, 37 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index ec603eed..98ec15a3 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -155,11 +155,11 @@ function populateAnkiDeckAndModel(opts) {
 }
 
 function populateDictionaries() {
-    const dictGroups = $('.dictionaries');
-    dictGroups.empty();
+    const container = $('.dictionaries');
+    container.empty();
 
     yomichan().translator.dictionary.getInfo().then(rows => {
-        for (const row of rows) {
+        rows.forEach(row => {
             const html = Handlebars.templates['dictionary.html']({
                 name: row.dictionary,
                 version: row.version,
@@ -167,14 +167,15 @@ function populateDictionaries() {
                 hasKanji: row.hasKanji
             });
 
-            dictGroups.append($(html));
-        }
+            container.append($(html));
+        });
     });
 }
 
 function populateAnkiFields(element, opts) {
-    const table = element.closest('.tab-pane').find('.anki-fields');
-    table.find('tbody').remove();
+    const tab = element.closest('.tab-pane');
+    const container = tab.find('.anki-fields tbody');
+    container.empty();
 
     const modelName = element.val();
     if (modelName === null) {
@@ -186,41 +187,22 @@ function populateAnkiFields(element, opts) {
     const markers = modelIdToMarkers(modelId);
 
     return anki().getModelFieldNames(modelName).then(names => {
-        const tbody = $('<tbody>');
         names.forEach(name => {
-            const button = $('<button>', {type: 'button', class: 'btn btn-default dropdown-toggle'});
-            button.attr('data-toggle', 'dropdown').dropdown();
-
-            const markerItems = $('<ul>', {class: 'dropdown-menu dropdown-menu-right'});
-            for (const marker of markers) {
-                const link = $('<a>', {href: '#'}).text(`{${marker}}`);
-                link.click(e => {
-                    e.preventDefault();
-                    link.closest('.input-group').find('.anki-field-value').val(link.text()).trigger('change');
-                });
-                markerItems.append($('<li>').append(link));
-            }
-
-            const groupBtn = $('<div>', {class: 'input-group-btn'});
-            groupBtn.append(button.append($('<span>', {class: 'caret'})));
-            groupBtn.append(markerItems);
-
-            const group = $('<div>', {class: 'input-group'});
-            group.append($('<input>', {
-                type: 'text',
-                class: 'anki-field-value form-control',
+            const html = Handlebars.templates['model.html']({
+                name,
+                markers,
                 value: opts[optKey][name] || ''
-            }).data('field', name).change(onOptionsChanged));
-            group.append(groupBtn);
-
-            const row = $('<tr>');
-            row.append($('<td>', {class: 'col-sm-2'}).text(name));
-            row.append($('<td>', {class: 'col-sm-10'}).append(group));
+            });
 
-            tbody.append(row);
+            container.append($(html));
         });
 
-        table.append(tbody);
+        tab.find('.anki-field-value').change(onOptionsChanged);
+        tab.find('.marker-link').click(e => {
+            e.preventDefault();
+            const link = e.target;
+            $(link).closest('.input-group').find('.anki-field-value').val(`{${link.text}}`).trigger('change');
+        });
     });
 }
 
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index d9825914..7e78db3b 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -104,6 +104,23 @@ templates['kanji-list.html'] = template({"1":function(container,depth0,helpers,p
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + ((stack1 = container.invokePartial(partials["footer.html"],depth0,{"name":"footer.html","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
 },"usePartial":true,"useData":true,"useDepths":true});
+templates['model.html'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return "                    <li><a class=\"marker-link\" href=\"#\">"
+    + container.escapeExpression(container.lambda(depth0, depth0))
+    + "</a></li>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<tr>\n    <td class=\"col-sm-2\">"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</td>\n    <td class=\"col-sm-10\">\n        <div class=\"input-group\">\n            <input type=\"text\" class=\"anki-field-value form-control\" data-field=\""
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "\" value=\""
+    + alias4(((helper = (helper = helpers.value || (depth0 != null ? depth0.value : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"value","hash":{},"data":data}) : helper)))
+    + "\">\n            <div class=\"input-group-btn\">\n                <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\">\n                    <span class=\"caret\"></span>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\">\n"
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.markers : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "                </ul>\n            </div>\n        </div>\n    </td>\n</tr>\n";
+},"useData":true});
 templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
diff --git a/tmpl/model.html b/tmpl/model.html
new file mode 100644
index 00000000..94772316
--- /dev/null
+++ b/tmpl/model.html
@@ -0,0 +1,18 @@
+<tr>
+    <td class="col-sm-2">{{name}}</td>
+    <td class="col-sm-10">
+        <div class="input-group">
+            <input type="text" class="anki-field-value form-control" data-field="{{name}}" value="{{value}}">
+            <div class="input-group-btn">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-right">
+                    {{#each markers}}
+                    <li><a class="marker-link" href="#">{{.}}</a></li>
+                    {{/each}}
+                </ul>
+            </div>
+        </div>
+    </td>
+</tr>