Ruby on rails 3 Back navigation未在主干js和rails 3应用程序中重新加载jwplayer

我的应用程序是rails 3应用程序，使用backbone.js和jw播放器播放视频播放列表。视频的索引视图将所有视频加载到jw player的播放列表中。当我离开索引页面时，我的问题就来了，比如说，离开单个视频的show_视图。当我点击浏览器的后退按钮时，当jw播放器再次尝试加载时，我得到一个错误

Uncaught TypeError: Object #<Object> has no method 'setup' 

只需在不存在的CSS id上调用jwplayer即可复制此错误。即

jwplayer（'non-existant-id'）。安装程序（…）

将产生相同的错误。我对主干网非常陌生，但我假设JQuery document.ready方法在初始加载索引页面后没有效果。一旦我使用

#

路由，DOM就不会重新加载，因此当我导航回索引页时，id“my video”还不存在，因此调用

jwplayer（“my-video”）

会产生错误。是否有任何类型的

主干。就绪
方法？：）

下面是一些代码，如果您还需要其他信息，请告诉我：

index.html.erb
rails视频视图

<div id="videos"></div>

<script type="text/javascript">
  $(function() {
    // Blog is the app name
    window.router = new SeehearmeWebapp.Routers.VideosRouter({videos: <%= @videos.to_json.html_safe -%>, users: <%= @users.to_json.html_safe -%>, questions: <%= @questions.to_json.html_safe -%>});
    Backbone.history.start();
  });
</script>

index\u view.js.coffee

class SeehearmeWebapp.Routers.VideosRouter extends Backbone.Router
  initialize: (options) ->
    @videos = new SeehearmeWebapp.Collections.VideosCollection()
    @videos.reset options.videos
    @users = new SeehearmeWebapp.Collections.UsersCollection()
    @users.reset options.users
    @playlist = []
    @questions = options.questions
    for i in [0..@videos.length-1]
      video = @videos.models[i]
      versions = video.attributes.versions[6]
      images = video.attributes.thumbnails[0]
      question = @questions[parseInt(video.attributes.question_id)-1]
      if !(question == undefined)
        title = question.text
      else
        title = ""

      if !(versions == undefined)
        creator_id = video.attributes.creator_id.toString()
        @playlist.push {file: versions.url, creator_id: creator_id, gender: @users.get(creator_id).attributes.gender, question: title ,  image: images.url}

  routes:
    "new"      : "newVideo"
    "index"    : "index"
    ":id/edit" : "edit"
    ":id"      : "show"
    ".*"        : "index"

  newVideo: ->
    @view = new SeehearmeWebapp.Views.Videos.NewView(collection: @videos)
    $("#videos").html(@view.render().el)

  index: ->
    @view = new SeehearmeWebapp.Views.Videos.IndexView(videos: @videos, users: @users, playlist: @playlist)
    $("#videos").html(@view.render().el)

  show: (id) ->
    video = @videos.get(id)

    @view = new SeehearmeWebapp.Views.Videos.ShowView(model: video)
    $("#videos").html(@view.render().el)

  edit: (id) ->
    video = @videos.get(id)

    @view = new SeehearmeWebapp.Views.Videos.EditView(model: video)
    $("#videos").html(@view.render().el)

SeehearmeWebapp.Views.Videos ||= {}

class SeehearmeWebapp.Views.Videos.IndexView extends Backbone.View
  template: JST["backbone/templates/videos/index"]

  playerHeight = '360'
  playerWidth = '640'
  defaultVersion = 0
  playlist = []

  initialize: () ->
    @options.videos.bind('reset', @addAll)
    playlist = @options.playlist

  addAll: () =>
    @options.videos.each(@addOne)

  addOne: (video) =>
    view = new SeehearmeWebapp.Views.Videos.VideoView({model : video})
    @$("tbody").append(view.render().el)

  render: =>
    $(@el).html(@template(videos: @options.videos.toJSON() ))
    @addAll()

    $(document).ready ->
      player = jwplayer('my-video')
      player.setup({playlist: playlist,  width: playerWidth, height: playerHeight, skin: "/jwplayer/skins/six/six.xml"})

    return this

SeehearmeWebapp.Views.Videos ||= {}

class SeehearmeWebapp.Views.Videos.ShowView extends Backbone.View
  template: JST["backbone/templates/videos/show"]

  render: ->
    $(@el).html(@template(@model.toJSON() ))
    return this

<h1>THIS IS A VIDEO</h1>

<a href="#/">Back</a>

index.jst.ejs

<div class="video-container">
    <div class="row gender-toggle-row">
        <div class="gender-toggle-label span1">Show Me: </div>
        <div class="btn-group gender-dropdown-group">
            <button class="btn btn-extra-large gender-dropdown gender-dropdown-display">Women and Men</button>
            <button class="btn btn-extra-large dropdown-toggle gender-dropdown" data-toggle="dropdown">
                <img src="assets/down-arrow.png" />
            </button>
            <ul class="dropdown-menu gender-dropdown-menu">
                <li><a class="gender-toggle-element" href="#">Women</a></li>
                <li><a class="gender-toggle-element" href="#">Men</a></li>
                <li><a class="gender-toggle-element" href="#">Women and Men</a></li>
            </ul>
        </div>
    </div>
    <div class="cinema-ribbon-sides"></div>
    <div class="cinema-ribbon"><h2 id="question-text" class="white centered-text">seehear.me</h2></div>
    <div id='my-video'></div>
    <div class="cinema-shadow"></div>
    <div class="cinema-controls">
        <a id="prev-video" class="cinema-prev"></a>
        <a href="#/71" role="button" class="meet"><div class="meet-btn-text">meet her</div></a>
        <a id="next-video" class="cinema-next"></a>
    </div>
</div>
<br />

show_view.js.coffee

class SeehearmeWebapp.Routers.VideosRouter extends Backbone.Router
  initialize: (options) ->
    @videos = new SeehearmeWebapp.Collections.VideosCollection()
    @videos.reset options.videos
    @users = new SeehearmeWebapp.Collections.UsersCollection()
    @users.reset options.users
    @playlist = []
    @questions = options.questions
    for i in [0..@videos.length-1]
      video = @videos.models[i]
      versions = video.attributes.versions[6]
      images = video.attributes.thumbnails[0]
      question = @questions[parseInt(video.attributes.question_id)-1]
      if !(question == undefined)
        title = question.text
      else
        title = ""

      if !(versions == undefined)
        creator_id = video.attributes.creator_id.toString()
        @playlist.push {file: versions.url, creator_id: creator_id, gender: @users.get(creator_id).attributes.gender, question: title ,  image: images.url}

  routes:
    "new"      : "newVideo"
    "index"    : "index"
    ":id/edit" : "edit"
    ":id"      : "show"
    ".*"        : "index"

  newVideo: ->
    @view = new SeehearmeWebapp.Views.Videos.NewView(collection: @videos)
    $("#videos").html(@view.render().el)

  index: ->
    @view = new SeehearmeWebapp.Views.Videos.IndexView(videos: @videos, users: @users, playlist: @playlist)
    $("#videos").html(@view.render().el)

  show: (id) ->
    video = @videos.get(id)

    @view = new SeehearmeWebapp.Views.Videos.ShowView(model: video)
    $("#videos").html(@view.render().el)

  edit: (id) ->
    video = @videos.get(id)

    @view = new SeehearmeWebapp.Views.Videos.EditView(model: video)
    $("#videos").html(@view.render().el)

SeehearmeWebapp.Views.Videos ||= {}

class SeehearmeWebapp.Views.Videos.IndexView extends Backbone.View
  template: JST["backbone/templates/videos/index"]

  playerHeight = '360'
  playerWidth = '640'
  defaultVersion = 0
  playlist = []

  initialize: () ->
    @options.videos.bind('reset', @addAll)
    playlist = @options.playlist

  addAll: () =>
    @options.videos.each(@addOne)

  addOne: (video) =>
    view = new SeehearmeWebapp.Views.Videos.VideoView({model : video})
    @$("tbody").append(view.render().el)

  render: =>
    $(@el).html(@template(videos: @options.videos.toJSON() ))
    @addAll()

    $(document).ready ->
      player = jwplayer('my-video')
      player.setup({playlist: playlist,  width: playerWidth, height: playerHeight, skin: "/jwplayer/skins/six/six.xml"})

    return this

SeehearmeWebapp.Views.Videos ||= {}

class SeehearmeWebapp.Views.Videos.ShowView extends Backbone.View
  template: JST["backbone/templates/videos/show"]

  render: ->
    $(@el).html(@template(@model.toJSON() ))
    return this

<h1>THIS IS A VIDEO</h1>

<a href="#/">Back</a>

这是一段视频

谢谢
 呈现主干视图并以以下方式将其添加到页面时：

$("#videos").html(@view.render().el)

您正在呈现到尚未添加到页面的DOM元素。由于您试图在
render（）
中设置jwplayer，jwplayer可能找不到元素

如果先将视图添加到页面，然后进行渲染，则可能会正常工作

$("#videos").html(@view.el)
@view.render()

现在，当您呈现模板时，它实际上在jwplayer尝试查找该元素之前就在页面上。
JQuery
$是否在（…）。那么（…）
是解决此问题的可能方法吗？我试过了，但没有成功，但可能我在
when（）
方法中放错了东西。这有点像是瞎猜，但你能试试这个：
$（“#videos”）.html（@view.el）@view.render（）
DUDE！非常感谢你！我花了一整天的时间在这上面！这样做有什么缺点吗？比如，为什么这不是设置路由器的默认方式？我想不出有什么缺点。。。我对jwplayer一无所知，但我想它正在使用
document.getElementById
查找元素。在将视图添加到页面之前呈现视图时，jwplayer还无法找到它。您还可以执行类似于
$（“#videos”）.html（@view.render（）.el）的操作@view.setupJWPlayer（）
酷哥，我真的很感谢你的帮助。我相信你对jwplayer正在做什么的猜测是正确的。