jquery - 为什么集合获取后 el 未定义

Question

我有这个 View (ordersView)，它在初始化时获取订单并在完成后重新渲染 View 。 el 属性是在路由器中实例化所述 View 等时定义的。我在实例化后调用渲染并显示 #order el，但在 fetch el 后未定义，这是为什么？

我的ordersView.js View :

// Menu View
// =============

// Includes file dependencies
define([ "jquery",
         'underscore',
         "backbone",
         'handlebars',
         "collections/menu",
         "collections/orders",
         "collections/stores",
         'hbs!template/ordersTemplate',
], function( $, _, Backbone, Handlbars, MenuCollection, OrdersCollection, StoresCollection, OrdersTemplate ) {

    // Extends Backbone.View
    var OrdersView = Backbone.View.extend( {


        // The View Constructor
        initialize: function() {

            OrdersCollection.fetch({'success': this.render})

        },

        events: {
        },        

        showMoreInfo: function(e) {
            $(e.target).closest('.store').toggleClass('hideinfo');
        },

        // Renders all of the Category models on the UI
        render: function() {
            console.log('rendered');
            console.log( this.$el );
            this.$el.html( OrdersCollection.toJSON() );

        }


    } );

    // Returns the View class
    return OrdersView;

} );

这是我的router.js 文件:

// Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone',
  '../views/ordersView',
], function($, _, Backbone, OrdersView) {

  var AppRouter = Backbone.Router.extend({
    routes: {
      // Default
      '*actions': 'defaultAction'
    }
  });

  var initialize = function(){

    var app_router = new AppRouter;

    app_router.on('route:defaultAction', function (actions) {
        var ordersView = new OrdersView({ el: $("#orders") });
        ordersView.render();
    });

    Backbone.history.start();
  };
  return { 
    initialize: initialize
  };
});

我正在使用 JQuery jquery-1.10.2、Backbone.jsBackbone-amd 1.0.0 和 RequireJS AMD 加载器

Answer 1

尝试将执行上下文绑定(bind)到 render()，然后再填充到 .fetch()

例如

OrdersCollection.fetch({'success': _.bind(this.render, this)})