骨干集合只在页面加载呈现，但不是来自不同的路线时

Question

我想与requirejs一起使用Backbone，目前工作得很好，我使用了一个非常干净的样板，但现在我也想开始使用Backbone处理视图和模型的方式（我以前没有这种方式），并且我的大厅表视图在页面加载时呈现得很好，但只要我更换页面并返回它，它就不会呈现任何内容。没有错误给出，并且集合似乎很好地获取新数据。它可能与在main.js中呈现基本表结构有关，然后在views/play.js中创建子视图而不告诉父视图？

骨干路由器（main.js）

play: function() { 
    var view = new app.Views.Play(); 
    app.instance.changePage(view); 
    require(['controllers/play'], function(PlayController) { 
     PlayController.init(); 
    }); 
}, 

… 

app.Views.App = app.Extensions.View.extend({ 

    el: 'body', 

    changePage: function(view) { 

    var previous = this.currentPage || null; 
    var next = view; 

    if(previous) { 
     if(AppLib.transitions === "notransitions") previous.remove(); 
     previous.transitionOut(function() { 
     previous.remove(); 
     }); 
    } 

    next.render({ page: true }); 
    this.$el.append(next.$el); 

    next.transitionIn(); 
    this.currentPage = next; 

    // Change page title 
    var title = app.lang.get(next.className + ".title"); 
    if(title === next.className + ".title") title = next.className; 
    document.title = (!_.isEmpty(Backbone.history.getFragment()) ? title.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : AppLib.name); 

    } 

}); 

… 

app.Views.Play = app.Extensions.View.extend({ 

    className: 'play', 
    addHeader: function() { 
    var options = { className: "gl-header", fixed: true, elements: ['BackButton', 'LoginButton'] }; 
    var n = new app.Views.Header({ el: "." + this.className, parentView: this, options: options }); 
    this.$el.prepend(n.render()); 
    }, 

    render: function() { 
    var template = _.template($('script[name=play]').html()); 
    this.$el.html(template()); 
    this.addHeader(); 
    return app.Extensions.View.prototype.render.apply(this, arguments); 
    } 

}); 

播放控制器（控制器/ play.js）

define(['jquery', 'backbone', 'models/play', 'views/play'], function($, Backbone, Model, View) { 
    return { 
     init: function() { 
      var LobbyCollection = new Model.LobbyCollection(); 
       LobbyCollection.getMatches(); 

      var LobbyView = new View.Lobby({ collection: LobbyCollection }); 
     } 
    } 
}); 

播放模型（模型/ play.js）

define(['jquery', 'backbone', 'persist', 'AppLib'], function($, Backbone, Persist, AppLib) { 
var Match = Backbone.Model.extend({}); 

    var LobbyCollection = Backbone.Collection.extend({ 
    model: Match, 
    url: "/api/v1/play/lobby-updates", 
    initialize: function() { 

    }, 
    getMatches: function(callback) { 
     var self = this; 
     this.fetch({ 
     reset: true, 
     success: function(collection, response, options) { 
      self.trigger('successOnFetch'); 
     }, 
     error: function(collection, response, options) { 
      self.trigger('errorOnFetch'); 
     } 
     }); 
    }, 
    parse: function(response) { 
     var obj = response["lobby_matches"]; 
     this.RandomLobbyName = response["random_name"]; 
     return _.map(obj, function(value, key) { 
     return obj[key]; 
     }); 
    } 
    }); 

    return { 
    LobbyCollection: LobbyCollection 
    } 
}); 

播放视图（views/play.js）

define(['jquery', 'backbone', 'persist', 'AppLib', 'jquery_debounce'], function($, Backbone, Persist, AppLib) { 

var LobbyView = Backbone.View.extend({ 
    el: **$(".play.page-container .table")** !!".play.page-container .table", 
    initialize: function() { 
     var self = this; 

     this.listenTo(this.collection, 'reset', this.render); 
     this.listenTo(this.collection, 'successOnFetch', this.handleSuccess); 
     this.listenTo(this.collection, 'errorOnFetch', this.handleError); 

     $(".play.page-container .table button.refresh-list").on("click", $.throttle(2000, function() { 
     $(this).html($("<span\>", { "class": "opaque blue throbber small" })).addClass("selected").prop("disabled", true); 
     self.collection.getMatches(); 
     })); 
    }, 
    handleSuccess: function(options) { 
     setTimeout(function() {  
     $(".play.page-container .table button.refresh-list").removeClass("selected").removeAttr("disabled").html($("<span\>", { "class": "icon-spinner6" })); 
    }, 2000); 
    }, 
    handleError: function(options) { 

    }, 
    render: function() { 
     var template = _.template($('script[name=lobby-table]').html()); 
     var $tbody = this.$el.children("tbody"); 
      $tbody.children().not(".create-lobby").remove(); 
      $tbody.append(template({ collection: this.collection.toJSON() })); 
     return this; 
    } 
}); 

return { 
    Lobby: LobbyView 
} 

}); 

Answer 1

我自己解决了。问题是我查找了如何在这里查看，并且他们使用jquery定义了元素，所以：el：$（“selector”），我跟着那个，但那是错误的。骨干已经把它放入jquery本身，所以它是双倍的。所以我简单地把我的选择器放在引号中，现在一切正常。