Include buttons inside typeahead suggestions using Backbone

Question

I am looking for a way to trigger different methods for the buttons in typeahead suggestions.

I am using backbone underneath and I have created the related events and methods that are to be called, however when I click only the default typeahead:selected event happens, but not the methods I have created.

EDIT

This is the relevant code for this view:

var QueryInputView = Backbone.View.extend({
el: $('#query-input'),
initialize: function (options) {
    _.bindAll(this, 'clearInput', 'initWordSuggester', 'initConceptSuggester', 'initTypeAhead');
    this.initTypeAhead();
},
events: {
    'keyup': function (e) {
        if (e.keyCode === 13) {
            var value = this.$el.typeahead('val').trim();
            if (value !== '') {
                kbmed.events.trigger('query-term:add', value);
                this.clearInput();
            }
        }
    },
    'click .add': "addConceptMust",
    'click .add-mustnot': "addConceptMustNot",
    'click .add-should': "addConceptShould"
},
addConceptMust: function (event) {
    // Add concept to filter list
    console.log('adding');
    var id = $(event.currentTarget).attr('id');
    var term = $(event.currentTarget).parent().prev().text();
    app.queryPanel.addQueryConceptMust({'conceptId': id, 'term': term});
},
addConceptMustNot: function (event) {
    // Add concept to filter list
    var id = $(event.currentTarget).attr('id');
    var term = $(event.currentTarget).parent().prev().text();
    app.queryPanel.addQueryConceptMustNot({'conceptId': id, 'term': term});
},
addConceptShould: function (event) {
    // Add concept to filter list
    var id = $(event.currentTarget).attr('id');
    var term = $(event.currentTarget).parent().prev().text();
    app.queryPanel.addQueryConceptShould({'conceptId': id, 'term': term});
},
clearInput: function () {
    this.$el.typeahead('val', '');
},
initWordSuggester: function () {
    var suggestWordsQuery = {
        "text": "%QUERY",
        "phraseSuggestions": {
            "phrase": {
                "field": "article.fulltext",
                "max_errors": 1,
                "gram_size": 3,
                "direct_generator": [
                    {
                        "field": "article.fulltext",
                        "suggest_mode": "popular",
                        "prefix_length": 2,
                        "min_doc_freq": 3
                    }
                ]
            }
        }
    };

    var engineWords = new Bloodhound({
        name: 'words',
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: 'http://' + kbmed.properties.es.hostAndPort + '/' + kbmed.properties.es.docIndex + '/_suggest?source=' + JSON.stringify(suggestWordsQuery),
            filter: function (response) {
                var suggestions = response.phraseSuggestions[0].options;
                if (suggestions && suggestions.length > 0) {
                    return $.map(suggestions, function (suggestion) {
                        return {
                            value: suggestion.text
                        };
                    });
                } else {
                    kbmed.log('Not suggestions');
                    return {}
                }
            }
        }
    });
    engineWords.initialize();
    return engineWords;
},
initConceptSuggester: function () {
    var suggestConceptsQuery = {
        "query": {
            "query_string": {
                "default_field": "term",
                "query": "%QUERY"
            }
        },
        "suggest": {
            "text": "%QUERY",
            "completitionSuggestions": {
                "completion": {
                    "field": "term_suggest"
                }
            }
        }
    };

    var engineConcepts = new Bloodhound({
        name: 'concepts',
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: 'http://' + kbmed.properties.es.hostAndPort + '/' + kbmed.properties.es.sugIndex + '/_search?source=' + JSON.stringify(suggestConceptsQuery),
            filter: function (response) {
                var completitionSuggestions = response.suggest.completitionSuggestions[0].options;
                if (completitionSuggestions && completitionSuggestions.length > 0) {
                    return $.map(completitionSuggestions, function (suggestion) {
                        var concept = JSON.parse(suggestion.text);
                        return {
                            concept: concept,
                            value: concept.term
                        };
                    });
                } else {
                    var hits = response.hits.hits;
                    if (hits && hits.length > 0) {
                        return $.map(hits, function (hit) {
                            var concept = hit._source;
                            return {
                                concept: concept,
                                value: concept.term
                            };
                        });
                    } else {
                        kbmed.log('Not suggestions');
                        return {};
                    }
                }
            }
        }
    });
    engineConcepts.initialize();
    return engineConcepts;
},
initTypeAhead: function () {
    var that = this;
    this.$el.typeahead({
        minLength: 3,
        highlight: true
    },
            {
                source: this.initWordSuggester().ttAdapter()
            },
            {
                source: this.initConceptSuggester().ttAdapter(),
                templates: {
                    header: '<h4 class="concept-name">Concepts</h4>',
                    suggestion: function (data) {
                        var concept = data.concept;
                        return '<div id="'
                                + concept.id
                                + '" class="concept-suggestion" >'
                                + concept.term.substring(0, 45)
                                + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-warning btn-xs add-should"><span class="glyphicon glyphicon-check"></span></a>'
                                + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-danger btn-xs add-mustnot"><span class="glyphicon glyphicon-minus"></span></a>'
                                + '<a style="float: right; margin-left: 3px;" href="#" id="' + concept.id + '" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></a>'
                                + '<strong style="float: right; font-size: 8pt; color: #837F7F;">'
                                + concept.category.toUpperCase()
                                + '</strong>'
                                + '</div>';
                    }
                }
            }
    ).on('typeahead:selected', function (e, datum) {
        console.log(e);
        console.log(datum);
        e.preventDefault();
        if (datum.concept) {
            kbmed.events.trigger('query-concept:add', datum.concept);
        } else {
            kbmed.events.trigger('query-term:add', datum.value);
        }
        that.clearInput();
    });
}

});

What can I do to get it working?

Answer 1

If you want listeners in this view, you will need to render the html with these buttons in this view.

Right now you are using javascript to write html. I would never recommend this. In your case this means that the view does not know of these elements.

So to solve this problem: use a template and render this in the render() method.

In the above example I would render an extra view for the 'Concepts' list. This new view can be triggered by this view.

here is a small example of what I mean:

var QueryView = Backbone.View.extend({
    el: $('#query-input'),
    initialize: function (options) {
        _.bindAll(this, 'clearInput', 'initWordSuggester', 'initConceptSuggester', 'initTypeAhead');
    },

    render: function () {

    },

    events: {
        'keyup': 'handleKeyup'
    }

    handleKeyup: function (e) {
       //run new concepts list view
       var conceptsView = new ConceptsListView('queryValue');
    }

});

var ConceptsListView = Backbone.View.extend({ 
     el: '#conceptsList',
     queryResults: {},
     initialize: function (options) {
        //do your query here
        this.queryResults = yourQuery();
        this.render();
     },
     render: function () {
        //Load HTML from template with query results
        //in this template the buttons are to be found
        this.$el.html(template);
     },
     events: {
         'click .add': "addConceptMust",
         'click .add-mustnot': "addConceptMustNot",
         'click .add-should': "addConceptShould"
     },

   addConceptMust: function (e) {

   },
   addConceptMustNot: function (e) {

   },
   addConceptShould: function (e) {

   },

 });