Récupérer une liste simple des entrées

Question

Cela devrait être une question fondamentale à propos Backbone.js, je suis un débutant en javascript / Backbone.js, j'ai lu plusieurs tutoriels, mais je ne parviens pas à faire une tâche assez simple: « aller chercher une liste de des entrées d'une base de données ».

Les applications entières est sur Google App Engine. La base de données contient déjà plusieurs entrées « mots », et j'ai utilisé Flask d'envoyer des représentations JSON des entrées.

Voici la I fonction utilisée pour cette tâche:

@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

Alors, pour autant que je comprends la façon dont le programme va travailler, ma demande de colonne vertébrale sera à la racine du site, il demandera l'URL « / mots » pour obtenir des données de la base de données dans un certain format appelé JSON, de sorte que l'application peut utiliser librement.

Je suppose que la http://localhost:8080/words URL est correcte, puisque la sortie est la suivante:

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

A la racine du site, j'ai une page Web vierge (je veux commencer par des tâches très simples premières), avec un simple fichier javascript (ainsi que les dépendances, json2, jQuery, underscore, et la colonne vertébrale).

Je suis un débutant en javascript, donc je coffeescript parce que la syntaxe est relativement similaire à ce que je connais en python, donc je pensais que la courbe d'apprentissage serait moins raide. Voici mon fichier café ainsi:

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

Pour résumer ce que je l'ai écrit ici, j'ai créé un modèle appelé Word, et une collection qui contient tous les mots. Cette collection devrait chercher toutes les données à partir du serveur en utilisant l'URL JSON. Chaque mot peut être rendu avec leur propre point de vue spécifique (WordView), dans un paragraphe p. Dans la vue de l'application (WordListView), je simplement lier l'action ajouter à la fonction ajouterUn, ainsi que l'action de rafraîchissement à la fonction addAll. Et j'essaie de chercher tous les mots à ce moment. La fonction crée ajouterUn une nouvelle vision du mot correspondant, et ajoute au corps un nouveau paragraphe qui doit contenir le mot. Chaque fois qu'un nouveau mot est ajouté, les déclencheurs de liaison de la fonction ajouterUn, ce qui rend chaque mot.

Je ne sais pas si j'ai la bonne façon de penser.

Answer 1

Si je comprends bien votre question, vous essayez de comprendre pourquoi Words n'est pas remplie lorsque vous exécutez Words.fetch(). J'ai quelques questions pour vous:

1. Quelle est la valeur de WordList.url? Il devrait être "/words" pour votre exemple.
2. méthode accepte d'extraction success et error ... callbacks

Cela signifie que vous pouvez déboguer comme suit (en supposant que votre navigateur possède une console de développeur):

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

Quand vous faites cela, que voyez-vous dans la console?