在jquery事件处理程序中使用sequelize查询结果
问题描述:
有一个electron framework,它为您提供了精简的浏览器来为桌面应用程序构建用户界面。在我的情况下,我使用jQuery
进行DOM导航,Sequelize
与我的sqlite数据库以及其他一些库进行通信。在jquery事件处理程序中使用sequelize查询结果
比方说,我有一个文本字段,用户可以键入电影名称。我的数据库存储了几百个电影名称。所以我想提供用户自动填充建议。
通常情况下,我会用这样的事情来注册jQuery
处理程序(这将呼应现场输入回控制台):
$('#movie-search-field').on('input', (event) => {
console.log(event.target.val())
})
随着sequelize,你通常会有一个模型(比如,Movie
)和像这样查询它:Movie.findAll()
。这里谈到的问题:
如果我注册我的处理程序,像这样:
Movie.findAll().then((movies) => {
$('#movie-search-field').on('input', (event) => {
/*Use movies here to build and show a suggestions list*/
})
})
那么它永远不会被触发。我已经验证.then
子句是通过从内部打印movies
到控制台来输入的。
在另一方面,如果我尝试从处理程序中查询数据库:
$('#movie-search-field').on('input', (event) => {
Movies.findAll().then((movies) => {
/*Use movies to build and show a suggestions list*/
})
})
那么处理程序退出之前的承诺得到解决,不建议所示。
如何在我的事件处理程序中使用数据库查询结果?
答
原来我在事件处理程序代码做了一些无关的错误,所以我上面描述的方法非常有效:
Movie.findAll().then((movies) => {
$('#movie-search-field').on('input', (event) => {
/*Use movies here to build and show a suggestions list*/
})
})
而且,如果您正在进行多个数据库查询并希望您的处理程序可以访问所有这些数据库,则可以执行以下操作:
let movies = Movie.findAll()
let tickets = Ticket.findAll()
Promise.all([movies, tickets]).then(values => {
let [movies, tickets] = values
/* register your handlers here and pass the data to them */
$("#some-selector").on('input', {movies: movies, tickets: tickets}, (event) => {
let movies = event.data.movies
let tickets = event.data.tickets
/* some event handling code that uses both movies and tickets */
})
})
答
你可能只是做一个简单的回调
$('#movie-search-field').on('input', (event) => {
getResults(function(movies) {
/* Display your movies */
})
})
function getResults(callback) {
Movies.findAll().then((movies) => {
/*Use movies to build and show a suggestions list*/
callback(movies)
})
}
所以当在输入框中输入一个用户类型,将请求的建议,然后当它返回时他们就会调用函数(回调),然后就可以显示它们