Récupérer une liste simple des entrées
-
22-10-2019 - |
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.
La solution
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:
- Quelle est la valeur de
WordList.url
? Il devrait être"/words"
pour votre exemple. - méthode accepte d'extraction
success
eterror
... 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?