1

モデル内の配列のアイテムにアクセスしようとしていますが、エラーが発生していますが、正しい属性を見つけてコンソールに書き込んでいるようです

class GD.Views.Place extends Backbone.View
  template: JST['mobile/templates/place']
  initialize: ->
    @model.on('change', @render, this)
  render: ->
    $(@el).html(@template(place:@model, open:@openNow() ))
    console.log @model.get("coordinates")
    console.log @model.get("coordinates")[0]
    console.log @model.get("coordinates")[1]
    console.log("done")
    this
  openNow: ->
    ...

ビューが画面にレンダリングされず、コンソールにこのメッセージが表示されます

Uncaught TypeError: Cannot read property '0' of undefined
  GD.Views.Place.Place.render
  GD.Routers.Main.Main.place
  _.extend.route
  (anonymous function)
  _.some._.any
  _.extend.loadUrl
  _.extend.start
  window.GD.init
  (anonymous function)
  jQuery.Callbacks.fire
  jQuery.Callbacks.self.fireWith
  jQuery.extend.ready
  DOMContentLoaded
[51.4528837, -0.9739059999999428]
51.4528837
-0.9739059999999428
done

エラー メッセージは、上記の 2 番目と 3 番目の console.log 行を参照しています。また、埋め込まれたハッシュでさらに属性にアクセスするときにエラーが発生しているようです。

なぜこれが起こっているのか、それを回避する方法がわかりません。事前に助けていただきありがとうございます。

4

1 に答える 1

4

バックボーン ビューの通常のパターンは次のとおりです。

v = new V
$(something).append(v.render().el)

それをモデルを初期化するための一般的なパターンと組み合わせると、次のようになります。

m = new M
m.fetch() # asynchronous!

次に、これを取得できます。

m = new M
m.fetch()
v = new V(model: m)
$(something).append(v.render().el)

これにより、モデルがサーバーからフェッチされる前にv.render()内部append呼び出しを行うことができます。あなたの場合、それは上記の呼び出しにあり、次のようになることを意味します。@model.get('coordinates')undefinedv.render()

Uncaught TypeError: Cannot read property '0' of undefined
...

次に、m.fetch()サーバーからデータを取得してイベントをトリガーする"change"と、そのイベントがビューで呼び出さrenderれ、次のようになります。

[51.4528837, -0.9739059999999428]
51.4528837
-0.9739059999999428
done

この一連のメッセージは、コンソールに表示されているものとまったく同じです。

私はあなたがこのようなことをしていると思います（上記のように）：

m = new M
m.fetch()
v = new V(model: m)
$(something).append(v.render().el)

@modelが実際に内部にロードされているかどうかを確認し、ロードしていない場合はrender何らかの「ロード中...」メッセージを表示してみてください。次に、"change"イベントが「実際の」レンダリングをトリガーします。

PS：CoffeeScript@の代わりに使用できます：this

initialize: ->
  @model.on('change', @render, @)
render: ->
  #...
  @

太い矢印 ( =>)renderを使用してメソッドを定義することもでき@model.onます。

initialize: ->
  @model.on('change', @render)
render: =>
  #...
  @

さらに、Backbone の最新バージョンを使用している場合は$el、ビュー インスタンスに があるため、次のことができます。

render: =>
  @$el.html(...)
  #...
  @
于 2012-04-30T19:18:37.540 に答える