使用jQueryUI.autocomplete和骨干JS的JavaScript模块 [英] Javascript module using jQueryUI.autocomplete and Backbone JS
问题描述
让我们假设我要使用 jQueryUi.autocomplete 一种制备取源从 backboneCollection 的模块。
我实现以下code（1）自动完成模块和结果
为Backbone.view下述（2）。
其实，我不是因为也进行集合的抓取，当用户不输入任何字母喜欢它。
我应该如何执行获取集合或源功能只有当用户开始键入东西输入框？
P.S：结果
我已经发布了类似的问题<一href=\"http://stackoverflow.com/questions/11413430/jquery-autocomplete-plugin-using-backbone-js\">jQuery自动完成插件使用JS骨干，
但由于aoutocomplete模块的需求，可以在不同视图之间共享我决定将收集的自动完成模块的获取。
（1）
/ *定义全球* /
定义（[
'用户'，
jQuery的，
jQueryUI的
]，功能（UserCollection，$）{
使用严格的;
无功自动完成功能=（元素）{ VAR userCollection，
数据; userCollection =新UserCollection（）;
userCollection.fetch（）; 数据= userCollection.toJSON（）; element.autocomplete（{
的minLength：3，
来源：函数（请求，响应）{
VAR匹配=新的RegExp（$ ui.autocomplete.escapeRegex（request.term），I）;
响应（$。grep的（数据，功能（价值）{
返回matcher.test（value.name）;
}））;
}，
创建：函数（）{
element.val（data.name）;
}，
重点：函数（事件，UI）{
element.val（ui.item.name）;
返回false;
}，
选择：函数（事件，UI）{
element.val（ui.item.name）;
返回false;
}
}）。数据（自动完成）._ renderItem =功能（UL，项目）{
返回$（'＆LT;立GT;＆LT; /李＆GT;'）
。数据（item.autocomplete'，项）
.append（'＆所述a取代;＆下; IMG SRC ='+ item.avatar +/＆GT;'+ item.name +'＆所述峰; br＆GT;＆下; / A＆GT;'）
.appendTo（微升）;
};
}; 返回自动完成;
}）;
（2）
//视图1（使用自动完成模块视图）
定义（[
autoCompleteModule
]，功能（autoCompleteModule）{
VAR MyView的= Backbone.View.extend（{ 事件：{
焦点#names'：'getAutocomplete
}，
getAutocomplete：功能（E）{
autoCompleteModule（$（'＃名字'））;
}
}）;
}）;
从<一//伪code href=\"http://stackoverflow.com/questions/11413430/jquery-autocomplete-plugin-using-backbone-js\">jQuery自动完成插件使用JS骨干
VAR MyView的= Backbone.View.extend（{
初始化：功能（）{
this.myCollection =新MyCollection的（）;}，
事件：{
重点#names'：'getAutocomplete'，
KEYDOWN #names'：'invokefetch
}，
invokefetch：功能（）{
this.myCollection.fetch（）;
$（＃姓名）解除绑定（的keydown，invokefetch）;
}，
getAutocomplete：功能（）{
$（＃姓名）。自动完成（{
来源：JSON.stringify（this.myCollection）
}）;
}
}）;
编辑 - 20120711 ---------
这个怎么样：
//伪code ...
//视图1（使用自动完成模块视图）
定义（[
autoCompleteModule
]，功能（autoCompleteModule）{
VAR MyView的= Backbone.View.extend（{ 事件：{
KEYDOWN #names'：'getAutocomplete
}，
getAutocomplete：功能（E）{
VAR EL = $（'＃姓名'）;
如果（！el.data）{
autoCompleteModule（EL）;
}
}
}）;
}）;
Let's suppose I want to use jQueryUi.autocomplete for making a module which take the source from a backboneCollection.
I implement the following code (1) for the autocomplete module and
the following for the Backbone.view (2).
Actually, I don't like it because the fetching of the collection is performed also when the user does not type any letter.
How should I perform the fetching collection or the source function only when the user starts to type something in the input box?
P.S.:
I have already posted a similar question jQuery Autocomplete Plugin using Backbone JS ,
but since the needs of aoutocomplete module could be shared between different view I decided to move the fetch of the collection in autocomplete module.
(1)
/*global define */
define([
'users',
'jquery',
'jqueryUi'
], function (UserCollection, $) {
"use strict";
var autoComplete = function(element) {
var userCollection,
data;
userCollection = new UserCollection();
userCollection.fetch();
data = userCollection.toJSON();
element.autocomplete({
minLength: 3,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function(value) {
return matcher.test(value.name);
}));
},
create: function() {
element.val(data.name);
},
focus: function(event, ui) {
element.val(ui.item.name);
return false;
},
select: function(event, ui) {
element.val(ui.item.name);
return false;
}
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
.appendTo(ul);
};
};
return autoComplete;
});
(2)
// View1 (view using the module autocomplete)
define([
'autoCompleteModule'
], function (autoCompleteModule) {
var MyView = Backbone.View.extend({
events: {
'focus #names': 'getAutocomplete'
},
getAutocomplete: function (e) {
autoCompleteModule($('#names'));
}
});
});
//Pseudo code from jQuery Autocomplete Plugin using Backbone JS
var MyView = Backbone.View.extend({
initialize: function () {
this.myCollection = new MyCollection();
},
events: {
'focus #names': 'getAutocomplete',
'keydown #names':'invokefetch'
},
invokefetch : function(){
this.myCollection.fetch();
$("#names").unbind( "keydown", invokefetch);
},
getAutocomplete: function () {
$("#names").autocomplete({
source: JSON.stringify(this.myCollection)
});
}
});
EDIT-20120711--------- how about this:
//Pseudo code ...
// View1 (view using the module autocomplete)
define([
'autoCompleteModule'
], function (autoCompleteModule) {
var MyView = Backbone.View.extend({
events: {
'keydown #names': 'getAutocomplete'
},
getAutocomplete: function (e) {
var el = $('#names');
if(!el.data){
autoCompleteModule(el);
}
}
});
});
这篇关于使用jQueryUI.autocomplete和骨干JS的JavaScript模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
