这应该是一个关于backbone.js的非常基本的问题,我是一个完全的javascript/backbone.js初学者,我已经阅读了几个教程,但我不设法做一个相当简单的任务:“从数据库中获取条目列表”。
整个应用程序都在Google App Engine上,数据库已经包括了几个条目“单词”,我用Flask发送了条目的JSON表示。
下面是我在这个任务中使用的函数:
@wordbook.route('/words', methods=('GET', 'POST'))
def wordlist():
return retrieve_words()
def retrieve_words():
content = json.dumps([word.to_dict() for word in Word.all()])
response = make_response(content)
response.mimetype = 'application/json'
return response
所以,就我对程序工作方式的理解,我的 Backbone 应用程序会在网站的根,他会要求“/words”URL以某种叫做JSON的格式从数据库中获取一些数据,这样应用程序就可以自由使用了。
我假设URL http://localhost:8080/words
是正确的,因为输出如下:
[{"word": "keyboard", "key": "ahB2b2NhYnVsYXJpdW0tYXBwcgoLEgRXb3JkGAEM", "language": "en", "nature": "noun", "usage": "Plural keyboards", "gender": ""}, {"word": "keyboard", "key": "ahB2b2NhYnVsYXJpdW0tYXBwcgoLEgRXb3JkGBoM", "language": "en", "nature": "verb", "usage": "Regular verb", "gender": ""}, {"word": " mouse", "key": "ahB2b2NhYnVsYXJpdW0tYXBwcgoLEgRXb3JkGB4M", "language": "en", "nature": "noun", "usage": "Plural mousemice", "gender": ""}, {"word": " mouse", "key": "ahB2b2NhYnVsYXJpdW0tYXBwcgoLEgRXb3JkGDIM", "language": "en", "nature": "verb", "usage": "Regular verb", "gender": ""}, {"word": " hard", "key": "ahB2b2NhYnVsYXJpdW0tYXBwcgoLEgRXb3JkGDoM", "language": "en", "nature": "adj", "usage": "Comparative harder, superlative hardest", "gender": ""}...]
在网站的根目录下,我有一个空白网页(我想先从非常简单的任务开始),其中有一个简单的javascript文件(沿着依赖项、json 2、jQuery、下划线和 Backbone.js )。
我是一个javascript初学者,所以我使用Coffeescript,因为它的语法和我实际知道的python比较相似,所以我认为学习曲线会不那么陡峭。下面是我的coffee文件:
class Word extends Backbone.Model
class WordList extends Backbone.Collection
model: Word
url: 'words'
Words = new WordList
class WordView extends Backbone.View
tagName: 'p'
render: ->
word = @model.get 'word'
$(@el).html word
@
class WordListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll @, 'addOne', 'addAll'
Words.bind 'add', @addOne
Words.bind 'refresh', @addAll
Words.fetch()
addOne: (word) ->
view = new WordView model: word
@.$ 'body'.append view.render().el
addAll: ->
Words.each @addOne
-> WordList = new WordListView
总结一下我在这里所写的内容,我创建了一个名为Word的模型,以及一个包含所有单词的集合。这个集合应该使用JSON URL从服务器获取所有数据。每个单词都可以用它们自己的特定视图呈现(WordView),在段落p中。在应用程序视图中(WordListView),我只是将add操作绑定到addOne函数,将refresh操作绑定到addAll函数,并尝试在此时获取所有单词,addOne函数创建相应单词的新视图,并将包含该单词的新段落附加到正文中。每次添加新单词时,绑定都会触发addOne函数,呈现每个单词。
我不知道我是否有正确的思考方式。
1条答案
按热度按时间chhqkbe11#
如果我没有理解错的话,您是在试图理解为什么在运行
Words.fetch()
时没有填充Words
。WordList.url
的值是什么?对于您的示例,它应该是"/words"
。1.获取方法接受
success
和error
回调...这意味着您可以按如下方式进行调试(假设您的浏览器有开发人员控制台):
当你这样做的时候,你在控制台上看到了什么?