Question

我有一个Backbone视图，我想在视图初始化时触发事件resizeMovieFrame。它会对$(window).on("load", @resizeMovieFrame)作出反应，因为'hello'会显示在控制台中。

但调整大小代码在加载时不会执行任何操作。但是，当我调整浏览器大小时，它确实有效。所以我认为当$(window).on("resize", @resizeMovieFrame)被解雇时，没有任何.movie-frame div可以调整大小。如果是这种情况，那么propper加载顺序是什么？

class Movieseat.Views.MovieseatsIndex extends Backbone.View

  template: JST['movieseats/index']
  id: 'something'

  initialize: ->
    @listenTo @collection, 'change', @renderEntries, this
    @listenTo @collection, 'add', @renderEntries, this
    @listenTo @collection, 'destroy', @renderEntries, this
    $(window).on("resize", @resizeMovieFrame)
    $(window).on("load", @resizeMovieFrame)

  render: -> 
    $(@el).html(@template(entries: @collection))
    this

  events: -> 
    "click li": "addEntry" 
    "click .remove": "destroyEntry" 

  addEntry: (e) -> 
    movie_title = $(e.target).parent().find('.movie-title').text()
    poster_path = $(e.target).parent().find('img').attr('src')
    release_date = $(e.target).parent().find('.release_date').text()
    console.log poster_path
    @collection.create title: movie_title, image: poster_path, release_date: release_date

  destroyEntry: (e) -> 
    thisid = @$(e.currentTarget).closest('div').parent().data('id')
    @collection.get(thisid).destroy()

  renderEntries: (entry) ->
    view = new Movieseat.Views.Showmovie(collection: @collection)
    $('#movie-container').html(view.render().el)

  resizeMovieFrame: ->
    equalheight = (container) ->
      currentTallest = 0
      currentRowStart = 0
      rowDivs = new Array()
      $el = undefined
      topPosition = 0
      $(container).each ->
        $el = $(this)
        $($el).height "auto"
        topPostion = $el.position().top
        unless currentRowStart is topPostion
          currentDiv = 0
          while currentDiv < rowDivs.length
            rowDivs[currentDiv].height currentTallest
            currentDiv++
          rowDivs.length = 0 # empty the array
          currentRowStart = topPostion
          currentTallest = $el.height()
          rowDivs.push $el
        else
          rowDivs.push $el
          currentTallest = (if (currentTallest < $el.height()) then ($el.height()) else (currentTallest))
        currentDiv = 0
        while currentDiv < rowDivs.length
          rowDivs[currentDiv].height currentTallest
          currentDiv++
        return

      return

    $(window).load ->
      equalheight ".movie-frame"
      return

    $(window).resize ->
      equalheight ".movie-frame"
      return

    console.log ('hello')

resizeMovieFrame事件会将所有.movie-frame div调整为相同的高度。

Answer 1

您可能需要绑定resizeWindowFrame函数的上下文。

resizeMovieFrame: =>

加载窗口不会更改内容

1 个答案: