3

我对 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')它甚至会毫无问题地附加到。

4

1 回答 1

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
于 2013-08-24T21:33:19.660 回答