我正在寻找一种方式来触发typeahead建议中不同按钮的方法。
我正在使用backbone框架,并且已经创建了相关的事件和方法,但是当我点击时,只有默认的typeahead:selected事件被触发,而没有调用我创建的方法。
编辑
这是该视图的相关代码:
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();
});
}
});
我该怎么做才能让它工作?