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

Backbone 视图的通常模式是这样的：

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 回答