Question

我遇到了Backbone Marionette的一个主要问题，我似乎无法弄明白。也许我的男人Derick Bailey可以帮助我。我正在做的很简单，至少有人会这么想。我有一个布局（现在请忽略不正确的咖啡缩进）。

class SearchLayout extends Backbone.Marionette.Layout

# template: _.template SearchResultsTemplate
template: Handlebars.compile SearchResultsTemplate
tagName: "section"
className: "search-layout"

ui:
  "searchInput":  ".search-input"
  "saveTopic":    ".save-this-topic"

regions:
  resourcesRegion: ".resources-content"

稍后我将绑定到与此布局相关联的模型，即@searchResults模型。

initialize: ->
  @model.on "change:query", @setClasses, @
  @model.on "change:query", @setResource, @

onRender: ->
  # app.vent.trigger "view:rendered"
  setTimeout =>
    @setClasses()
    @globalBindings()
    @handlebarsHelpers()
    @bindUIElements()
  , 50

handlebarsHelpers: ->
  # helpers specific to this view.

globalBindings: ->
  # @model.on "change:query", @setResource, @

setResource: ->

  @resources = new ResourcesCollection()
  @resources.fetch
    async: false
    success: =>
      @view = new ResourcesViews.collectionView
        collection: @resources
      @resourcesRegion.show @view

我首先尝试使用.on绑定到我的资源，但效果不佳，所以我决定在fetch上取得成功，如下所示。

奇怪的是我让它工作得很好，它甚至第一次渲染（有时），但是在我对搜索模型进行任何更改后，我收到了这个错误：

Uncaught TypeError: Cannot call method 'show' of undefined

以下是我的观点：

define [
  "backbone.marionette"
  "jquery"
  "underscore"
  "backbone"
  "text!templates/resources/resource.html"
], (Marionette, $, _, Backbone, ResourceViewTemplate) ->
  class ResourceView extends Marionette.ItemView

    className: "js-resource js-resource-view col-md-6"
    tagName: "div"
    template: Handlebars.compile ResourceViewTemplate

    initialize: ->

    onBeforeRender: ->

    onRender: ->

  class ResourcesEmptyView extends Marionette.ItemView

    className: "js-resource-not-found not-found js-resource-view col-md-12"
    tagName: "section"
    template: "<h3>Sorry, nothing found for that search. Try another.</h3>"

    initialize: ->

    onBeforeRender: ->

    onRender: ->

  class ResourcesCollectionView extends Marionette.CollectionView

    className: "js-resources js-resources-view list-unstyled"
    tagName: "ul"
    emptyView: ResourcesEmptyView
    itemView: ResourceView

    initialize: ->

    onBeforeRender: ->

    onRender: ->

  exports =
    collectionView: ResourcesCollectionView
    individualView: ResourceView

奇怪的是，我的@view.render().el实际上是定义并且工作得很好！它甚至会附加到$('body')没问题。

Answer 1

我想出来了！

原来，我需要重新渲染该区域，然后在我的@setResources方法上调用onRender。我不完全确定为什么它会被定义为未定义，但这就是最终的工作：

initialize: ->
  @model.on "change:query", @setClasses, @
  @model.on "change:query", @render, @

onRender: ->
  console.log 'render'
  # app.vent.trigger "view:rendered"
  setTimeout =>
    @setClasses()
    @globalBindings()
    @handlebarsHelpers()
    @bindUIElements()
    @setResource()
  , 50

handlebarsHelpers: ->
  # helpers specific to this view.

globalBindings: ->
  # @model.on "change:query", @setResource, @

setResource: ->
  console.log 'setting resource'

  @resources = new ResourcesCollection
    searchQuery: @model.get("query")
  @resources.fetch
    async: false
    success: =>
      @view = new ResourcesViews.collectionView
        collection: @resources
      console.log @resourcesRegion
      @resourcesRegion.show @view

Backbone布局中未定义的区域

1 个答案: