javascript - Backbone 模型属性在被调用时引发 TypeError

Question

我正在尝试访问模型中的数组项，它会引发错误，但似乎仍在找到正确的属性并将其写入控制台

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: ->
    ...

View 未在屏幕上呈现，我在控制台中看到此消息

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。在访问嵌入式散列中的更多属性时，它似乎也会引发错误。

我不明白为什么会这样或如何解决它。提前感谢您的帮助/耐心等待!

Answer 1

Backbone View 的常见模式是这样的:

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)

这将允许 append 调用中的 v.render() 在从服务器获取模型之前发生。在您的情况下，这意味着 @model.get('coordinates') 在上面的 v.render() 调用中将是 undefined你会得到:

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

然后，m.fetch() 从服务器和 triggers a "change" event 获取数据，然后该事件将在您的 View 上调用 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: ->
  #...
  @

您也可以使用 fat arrow (=>)定义您的 render 方法而不用担心为 @model.on 提供上下文:

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

此外，如果您使用的是最新版本的 Backbone，您有一个 $el在您的 View 实例中，您可以:

render: =>
  @$el.html(...)
  #...
  @