エントリの簡単なリストを取得します

StackOverflow https://stackoverflow.com/questions/6800595

質問

これはbackbone.jsに関する非常に基本的な質問である必要があります。私はjavascript/backbone.jsの完全な初心者です。いくつかのチュートリアルを読みましたが、かなり簡単なタスクを実行することはできません。データベース "。

アプリケーション全体がGoogle App Engineにあります。データベースにはすでにいくつかのエントリ「ワード」が含まれており、フラスコを使用してエントリのJSON表現を送信しました。

これが私がこのタスクに使用した関数です：

@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

したがって、私がプログラムの動作方法を理解している限り、私のバックボーンアプリケーションはウェブサイトのルートになります。アプリケーションが自由に使用できるように。

URLを想定しています http://localhost:8080/words 出力は次のため、正しいです。

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

Webサイトのルートには、単純なJavaScriptファイルを使用して、空白のWebページ（最初に非常に簡単なタスクから始めたい）があります（依存関係、JSON2、jQuery、アンダースコア、バックボーンとともに）。

私はJavaScriptの初心者なので、構文はPythonで実際に知っているものと比較的類似しているため、Coffeescriptを使用したので、学習曲線の急勾配は低くなると思いました。これが私のコーヒーファイルです。

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

ここで書いたものをまとめるために、Wordというモデルとすべての単語を含むコレクションを作成しました。このコレクションは、JSON URLを使用してサーバーからすべてのデータを取得する必要があります。各単語は、段落pで、独自の特定のビュー（WordView）でレンダリングできます。アプリケーションビュー（WordListView）では、ADDアクションをアドオン関数にバインドするだけでなく、AddAll関数への更新アクションを単純にバインドします。そして、私はこの時点ですべての単語を取得しようとします。 Addone関数は、対応する単語の新しいビューを作成し、単語を含む新しい段落を身体に追加します。新しい単語が追加されるたびに、バインディングが追加機能をトリガーし、各単語をレンダリングします。

正しい考え方があるかどうかはわかりません。

役に立ちましたか？

解決

私があなたの質問を正しく理解しているなら、あなたは理由を理解しようとしています Words 走ったときに人口がかかっていません Words.fetch(). 。私はあなたにいくつか質問があります：

  1. の価値は何ですか WordList.url？そのはず "/words" あなたの例について。
  2. メソッドを取得します 受け入れます success と error コールバック...

つまり、次のようにデバッグできることを意味します（ブラウザに開発者コンソールがあると仮定します）：

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

あなたがそれをするとき、あなたはコンソールで何を見ますか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top