Recupero un semplice elenco di voci

Question

Questa dovrebbe essere una domanda molto di base su backbone.js, io sono un principiante assoluto in Javascript / backbone.js, ho letto diversi tutorial, ma non riuscire a fare un compito abbastanza semplice: "andare a prendere un elenco di voci di un database".

L'intero applicazioni è su Google App Engine. Il database comprende già diverse voci "parole", e ho usato per inviare Flask rappresentazioni JSON delle voci.

Questa è la funzione che ho utilizzato per questo compito:

@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

Quindi, per quanto mi pare di capire il modo in cui il programma dovrà lavorare, la mia domanda spina dorsale sarà alla base del sito, chiederà al "/ parole" URL per ottenere alcuni dati dal database in un certo formato chiamato JSON, in modo che l'applicazione può utilizzare liberamente.

I assumere la http://localhost:8080/words URL è corretto, poiché l'uscita è il seguente:

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

Alla radice del sito, ho una pagina web vuota (voglio iniziare con compiti molto semplici primi), con un semplice file javascript (insieme con le dipendenze, json2, jQuery, sottolineatura, e la spina dorsale).

Sono un principiante in javascript, quindi ho usato CoffeeScript perché la sintassi è relativamente simile a quello che in realtà so in python, così ho pensato che la curva di apprendimento sarebbe meno ripida. Ecco il mio file di caffè in tal modo:

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

Per riassumere ciò che ho scritto qui, ho creato un modello chiamato Word, e una collezione che contiene tutte le parole. Questa collezione dovrebbe recuperare tutti i dati dal server utilizzando l'URL JSON. Ogni parola può essere reso con la propria specifica vista (WordView), in un paragrafo p. Dal punto di vista dell'applicazione (WordListView), ho semplicemente legano l'azione metti in funzione addOne, così come l'azione di aggiornamento alla funzione addAll. E cerco di prendere tutte le parole in questo momento. La funzione addOne crea una nuova visione della parola corrispondente, e aggiunge al corpo un nuovo paragrafo che dovrebbe contenere la parola. Ogni volta che si aggiunge una nuova parola, i trigger di legame della funzione addOne, rendendo ogni parola.

Non so se ho avuto il modo giusto di pensare.

Answer 1

Se ho capito bene la tua domanda, si sta cercando di capire perché Words non viene popolato quando si esegue Words.fetch(). Ho alcune domande per voi:

1. Qual è il valore di WordList.url? Dovrebbe essere "/words" per il tuo esempio.
2. Il metodo accetta success e error callback ...
Scarica

Ciò significa che è possibile eseguire il debug come segue (supponendo che il browser ha una console sviluppatore):

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

Quando lo fate, cosa vedi nella console?