Fetching a simple list of entries

Question

This should be a very basic question about backbone.js, I am a complete beginner in javascript/backbone.js, I have read several tutorials, but I do not manage to do a fairly simple task: "fetching a list of entries from a database".

The whole applications is on Google App Engine. The database already includes several entries "words", and I used Flask to send JSON representations of the entries.

Here is the function I used for this task:

@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

So, as far as I understand the way the program will be working, my backbone application will be at the root of the website, he will ask the "/words" URL to get some data from the database in a certain format called JSON, so that the application can use it freely.

I assume the URL http://localhost:8080/words is correct, since the output is the following:

[{"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": ""}...]

At the root of the website, I have a blank webpage (I want to start with very simple tasks first), with a simple javascript file (along with the dependencies, json2, jQuery, underscore, and backbone).

I am a beginner in javascript, so I used Coffeescript because the syntax is relatively similar to what I actually know in python, so I thought the learning curve would be less steep. Here is my coffee file thus:

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

To sum up what I have written here, I have created a model called Word, and a collection which contains all the words. This collection should fetch all the data from the server using the JSON URL. Each word can be rendered with their own specific view (WordView), in a paragraph p. In the application view (WordListView), I simply bind the add action to the addOne function, as well as the refresh action to the addAll function. And I try to fetch all the words at this time. The addOne function creates a new view of the corresponding word, and appends to the body a new paragraph that should contain the word. Everytime a new word is added, the binding triggers the addOne function, rendering each word.

I don't know if I have got the right way to think.

Answer 1

If I understand your question correctly, you're trying to understand why Words isn't populated when you run Words.fetch(). I have a few questions for you:

1. What is the value of WordList.url? It should be "/words" for your example.
2. The fetch method accepts success and error callbacks...

That means that you can debug as follows (assuming your browser has a developer console):

Words.fetch
  success: (collection, response) -> console.log "success: #{response}"
  failure: (collection, response) -> console.log "failure: #{response}"

When you do that, what do you see in the console?