Abrufen einer einfachen Liste von Einträgen

Question

Dies sollte eine sehr grundlegende Frage zu Backbone.js sein. Ich bin ein vollständiger Anfänger in JavaScript/backbone.js. Ich habe mehrere Tutorials gelesen, aber ich schaffe es nicht, eine ziemlich einfache Aufgabe zu erledigen: "Eine Liste von Einträgen aus einem abrufen Datenbank".

Die gesamten Anwendungen sind in der Google App Engine. Die Datenbank enthält bereits mehrere Einträge "Wörter", und ich habe Flask verwendet, um JSON -Darstellungen der Einträge zu senden.

Hier ist die Funktion, die ich für diese Aufgabe verwendet habe:

@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

Soweit ich verstehe, wie das Programm funktioniert, wird meine Backbone -Anwendung im Root der Website sein, er wird die URL "/Words" bitten, einige Daten aus der Datenbank in einem bestimmten Format namens JSON zu erhalten. damit die Anwendung sie frei verwenden kann.

Ich nehme die URL an http://localhost:8080/words ist korrekt, da die Ausgabe die folgende ist:

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

Am Stamm der Website habe ich eine leere Webseite (ich möchte zuerst mit sehr einfachen Aufgaben beginnen) mit einer einfachen JavaScript -Datei (zusammen mit den Abhängigkeiten, JSON2, JQuery, Undercore und Backbone).

Ich bin ein Anfänger in JavaScript, also habe ich Coffeescript verwendet, weil die Syntax dem in Python tatsächlich relativ ähnlich ist, und ich dachte, die Lernkurve wäre weniger steil. Hier ist meine Kaffee -Datei also:

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

Um das zusammenzufassen, was ich hier geschrieben habe, habe ich ein Modell namens Word erstellt und eine Sammlung, die alle Wörter enthält. Diese Sammlung sollte alle Daten vom Server mit der JSON -URL abrufen. Jedes Wort kann mit seiner eigenen spezifischen Ansicht (Wortview) in einem Absatz p. In der Anwendungsansicht (WordListView) binde ich einfach die ADD -Aktion an die Addone -Funktion sowie an die Aktualisierungsaktion an die Addall -Funktion. Und ich versuche zu diesem Zeitpunkt alle Wörter zu holen. Die Addone -Funktion erstellt eine neue Ansicht des entsprechenden Wortes und fügt dem Körper einen neuen Absatz an, der das Wort enthalten sollte. Jedes Mal, wenn ein neues Wort hinzugefügt wird, löst die Bindung die Addone -Funktion aus und rendert jedes Wort.

Ich weiß nicht, ob ich den richtigen Weg zum Nachdenken habe.

Answer 1

Wenn ich Ihre Frage richtig verstehe, versuchen Sie zu verstehen, warum Words ist nicht besiedelt, wenn Sie rennen Words.fetch(). Ich habe ein paar Fragen an Sie:

1. Was ist der Wert von WordList.url? Es sollte sein "/words" Für Ihr Beispiel.
2. Das Fetch -Methode Akzeptiert success und error Rückrufe...

Das bedeutet, dass Sie wie folgt debuggen können (vorausgesetzt, Ihr Browser hat eine Entwicklerkonsole):

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

Was sehen Sie in der Konsole?