Obtener una lista simple de entradas

Question

Esta debería ser una pregunta muy básica sobre Backbone.js, soy un principiante completo en JavaScript/Backbone.js, he leído varios tutoriales, pero no logro hacer una tarea bastante simple: "obtener una lista de entradas de un base de datos".

Todas las aplicaciones están en Google App Engine. La base de datos ya incluye varias entradas "palabras", y utilicé Flask para enviar representaciones JSON de las entradas.

Aquí está la función que utilicé para esta tarea:

@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

Entonces, por lo que entiendo, la forma en que funcionará el programa, mi aplicación de backbone estará en la raíz del sitio web, le pedirá a la URL "/palabras" que obtenga algunos datos de la base de datos en un determinado formato llamado JSON, para que la aplicación pueda usarla libremente.

Asumo la url http://localhost:8080/words es correcto, ya que la salida es la siguiente:

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

En la raíz del sitio web, tengo una página web en blanco (primero quiero comenzar con tareas muy simples), con un archivo JavaScript simple (junto con las dependencias, JSON2, JQuery, Underscore y Backbone).

Soy un principiante en JavaScript, así que usé Coffeescript porque la sintaxis es relativamente similar a lo que realmente sé en Python, por lo que pensé que la curva de aprendizaje sería menos empinada. Aquí está mi archivo de café así:

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

Para resumir lo que he escrito aquí, he creado un modelo llamado Word y una colección que contiene todas las palabras. Esta colección debería obtener todos los datos del servidor utilizando la URL JSON. Cada palabra se puede representar con su propia vista específica (WordView), en un párrafo p. En la vista de la aplicación (WordSInsView), simplemente encuentro la acción Agregar a la función admite, así como la acción de actualización a la función addall. Y trato de buscar todas las palabras en este momento. La función admite crea una nueva vista de la palabra correspondiente y agrega al cuerpo un nuevo párrafo que debe contener la palabra. Cada vez que se agrega una nueva palabra, la vinculación desencadena la función de complemento, haciendo que cada palabra.

No sé si tengo la forma correcta de pensar.

Answer 1

Si entiendo tu pregunta correctamente, estás tratando de entender por qué Words no está poblado cuando corres Words.fetch(). Tengo algunas preguntas para usted:

1. ¿Cuál es el valor de WordList.url? Debería ser "/words" para tu ejemplo.
2. los Método de búsqueda aceptación success y error devoluciones de llamada ...

Eso significa que puede depurar de la siguiente manera (suponiendo que su navegador tenga una consola de desarrollador):

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

Cuando haces eso, ¿qué ves en la consola?