backbone.js 获取简单的条目列表

vdzxcuhz  于 2023-02-19  发布在  其他
关注(0)|答案(1)|浏览(200)

这应该是一个关于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函数,呈现每个单词。
我不知道我是否有正确的思考方式。

chhqkbe1

chhqkbe11#

如果我没有理解错的话,您是在试图理解为什么在运行Words.fetch()时没有填充Words

  1. WordList.url的值是什么?对于您的示例,它应该是"/words"
    1.获取方法接受successerror回调...
    这意味着您可以按如下方式进行调试(假设您的浏览器有开发人员控制台):
Words.fetch
  success: (collection, response) -> console.log "success: #{response}"
  failure: (collection, response) -> console.log "failure: #{response}"

当你这样做的时候,你在控制台上看到了什么?

相关问题