- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在寻找一种方法来为预输入建议中的按钮触发不同的方法。
我在下面使用主干并且我已经创建了要调用的相关事件和方法,但是当我单击时只发生默认的 typeahead:selected 事件,而不是我创建的方法。
编辑
这是这个 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();
});
}
});
我该怎么做才能让它发挥作用?
最佳答案
如果你想在这个 View 中使用监听器,你需要在这个 View 中渲染带有这些按钮的 html。
现在您正在使用 javascript 编写 html。我永远不会推荐这个。在您的情况下,这意味着 View 不知道这些元素。
所以要解决这个问题:使用模板并在 render() 方法中渲染它。
在上面的示例中,我将为“概念”列表呈现一个额外的 View 。此 View 可以触发此新 View 。
这是我的意思的一个小例子:
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) {
},
});
关于javascript - 使用 Backbone 在预输入建议中包含按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39337106/
我是一个相对较新的程序员; CS 学士学位,大学毕业大约 2 年,主要使用 C# 中的 .NET。我对 SQL 交互/脚本编写相当流利,并且对 ASP.NET 做了一些工作(主要是维护现有站点)。 我
我计划开发一个简单的解决方案,使我能够即时执行非常基本的视频流分析。我以前从未做过类似的事情,因此这是一个非常笼统和开放的问题。主要重点是检查流是否正常运行,例如 - 卡住帧、黑屏以及音频是否存在。同
我正在考虑重组一个大型 Maven 项目...... 我们当前结构的基本概述: build [MVN plugins, third party dependency management]:5.1
我需要有关附加查询的建议。该查询执行了一个多小时,并根据解释计划进行了全表扫描。我对查询调优还很陌生,希望得到一些建议。 首先,为什么我要进行全表扫描,即使我使用的所有列都在其上创建了索引。 其次,有
我正在做一个项目,我需要在 4 个模型之间创建三个多对多关系。这是它的过程: 常见问题类别可以有许多常见问题子类别,反之亦然。 常见问题组可以有许多常见问题的子类别,反之亦然。 常见问题可以有许多常见
对于代码大小比语音质量更重要的 PIC 和/或 ARM 嵌入式系统,是否有任何易于使用的免费或廉价的语音合成库?现在似乎 1 meg 的封装被认为是“紧凑的”,但很多微 Controller 都比它小
我们正在使用 Solr 建议器功能进行 businessName 查找。当用户输入查询以及匹配的名称时,我们希望 solr 发送来自个人资料的其他属性,如 id、地址、城市、州、国家等字段。 我尝试使
我正在构建一个用户界面。我的计划将包括 4 个主要部分: 1) 顶部菜单 - TMainMenu。一个窗口的顶部 2) 主菜单 - TTreeView。一个窗口的左边。 TreeView的每一项=对应
我的公司需要一个任务管理系统来处理从“为X购买一台计算机”到“将一个人转移到另一个国家”这样简单的场景。简单的场景是由一个人处理的单个任务,而更大的任务可以分解为在工作流程中委派给多个人的多个子任务。
MarkLogic 服务器的林大小与实际内存的建议比率是多少?例如,我目前有一个 190GB 的数据库,并且该数据库随着时间的推移而不断增长。由于数据库会不断增长,我最终需要对该数据库进行集群。因此,
去年我收到了一个礼物,它是一个索尼 CMT700Ni 音频站,支持 wifi。它还具有类似于广播的功能,称为“PartyStreaming”。我目前正在挖掘内部,探索它,所以也许我可以结束拥有自己的“
有没有我可以阅读的研究论文/书籍可以告诉我针对手头的问题哪种特征选择算法最有效。 我试图简单地将 Twitter 消息识别为 pos/neg(首先)。我从基于频率的特征选择开始(从 NLTK 书开始)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我正在浏览 stackoverflow 以查找有关使用 jUnit 进行测试的常见建议,但仍然有几个问题。我知道,如果要测试的方法很复杂,最好的方法是将其分成小的单独部分并测试每个部分。但问题是 -
我有一个方法如下 public List> categorize(List customClass){ List> returnValue = new ArrayList<>();
我的问题是,当按照下面的程序合并时,在最佳实践场景中,“将分支折叠回主干”程序的最后一步是正确的方法吗? 我已经使用 svn 很多年了。在我的个人项目中,我总是毫不犹豫地在主干上愉快地进行修改,并且在
我读过 UINavigationController当您想从 n 个屏幕跳转到第一个屏幕时,这是最佳选择。这样做需要以下代码: NSMutableArray *array=[[NSMutableArr
我有一个文件输入类。它在构造函数中有一个字符串参数来加载提供的文件名。但是,如果文件不存在,它就会退出。如果文件不存在,我希望它输出一条消息 - 但不确定如何...... 这是类(class): pu
我希望创建一个“您访问过的国家/地区” map - 就像您可能在 Facebook、TravelAdvisor 和诸如此类的网站上看到的那样。 我尝试过不同的闪光灯套件,但它们并不像我希望的那样先进。
我需要一些关于如何处理我想用 Perl 编写的脚本的建议。基本上我有一个看起来像这样的文件: id: 1 Relationship: "" name: shelby pet: 1
我是一名优秀的程序员,十分优秀!