尝试使用bootstrap popover构建一个简单的小部件
UW.UI.ProjectMember = {
dropdown: ".project-member-select-dropdown",
input: ".member-search-field",
options: {
container: $('.project-member-select'),
trigger: "click",
minChar: 2
},
renderTemplate: function() {
var template = '<div class="project-member-picker">'+
'<div class="project-member-search-box">'+
'<input type="text" class="member-search-field input-block-level" placeholder="Enter a name">'+
'<ul class="project-member-select-dropdown"></ul>'+
'</div>'+
'<div><p>You can invite your colleagues to use UberWork with you</p></div>'+
'</div>';
this.options.container.append(template);
return this;
},
initPopover: function() {
var _this = this;
$(".add-member-btn").popover({
html: true,
placement: "bottom",
trigger: _this.options.trigger,
container: '#window',
content: _this.build()
});
},
build: function() {
return $('.project-member-picker').html();
},
delegateEvents: function() {
var _this = this;
$(document).on("keydown",'.popover .member-search-field', function(event) {
_this.processInput(event, _this);
});
$(document).on("click", '.popover li.member', function(event) {
_this.addToken(event, _this);
});
$(document).on("click", '.popover .project-members ul li a.remove', function(event) {
_this.deleteToken(event, _this);
});
},
showDropdown: function() {
$(this.dropdown).css({
position: "absolute",
zindex: 999
}).show();
},
hideDropdown: function() {
$(this.dropdown).hide().empty();
},
processInput: function(event, that) {
var input = $(event.currentTarget),
inputValue = input.val(), timeout;
if(inputValue.length >= 1) {
that.showSearchActivity();
clearTimeout(timeout);
timeout = setTimeout(function() {
that.runSearch(inputValue.toLowerCase())
}, 300);
}
else {
that.hideDropdown();
}
},
showSearchActivity: function() {
$(this.dropdown).html('<p>Searching...</p>');
this.showDropdown();
},
runSearch: function(query) {
var results = $.grep(UW.Members, function (row) {
return[row.name].toString().toLowerCase().indexOf(query.toLowerCase()) > -1;
});
this.populateDropdown(query, results);
},
populateDropdown: function(query, results) {
var _this = this;
if(results && results.length) {
$(this.dropdown).empty();
this.hideDropdown();
$.each(results, function (index, value) {
if(value.photo == "")
var photo = UW.Constants.avatar;
else
var photo = value.photo;
var template = '<li class="member" data-id="'+value.user_id+'">'+
'<div class="member-avatar pull-left"><img src="'+photo+'"></div>'+
'<div class="member-name pull-left">'+value.name+'</div>'+
'</li>';
$(_this.dropdown).append(template);
});
this.showDropdown();
}else {
$(this.dropdown).html('<p>No results</p>');
this.showDropdown();
}
},
addToken: function(event, that) {
var el = $(event.currentTarget);
var id = el.attr('data-id');
var user = {
name: $(el).find('div.member-name').html(),
photo: $(el).find('div.member-avatar').find('img').attr('src')
};
//update member list
var members = this.options.container.find('div.project-members ul.member-avatars');
if(members.find('li[data-id="'+id+'"]').length == 0) {
members.append('<li data-id="'+id+'"><img src="'+user.photo+'" title="'+user.name+'"></li>');
}
//clear input
$(that.input).val('');
//Hide dropdown
this.hideDropdown();
},
deleteToken: function(event, that) {
event.preventDefault();
},
init: function() {
this.renderTemplate();
this.initPopover()
this.delegateEvents();
}
我知道发布了很多代码,无论如何我都是从骨干视图中实例化UW.UI.ProjectMember
类。
单击$(".add-member-btn")
元素以触发弹出窗口时,一切正常,但是当再次单击元素以隐藏弹出框时,chrome控制台会显示此错误“未捕获RangeError:超出最大调用堆栈大小”。
我能做错什么?任何帮助将不胜感激。