骨干：引导加载页面上require.js

Question

我定义上require.js我的文件配置如下模式（）doesn't工作：

require.config({ 
    shim: { 
     'underscore': { 
      exports: '_' 
     }, 
     'backbone': { 
      deps: ['underscore', 'jquery'], 
      exports: 'Backbone' 
     }, 
     'bootstrap': { 
      deps: ['jquery'] 
     } 
    }, 
    paths: { 
     jquery: 'libs/jquery-1.10.1', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone', 
     bootstrap: 'libs/bootstrap', 
     templates: '../templates' 
    } 
}); 

require(['app'], function (App) { 
    App.initialize(); 
}) 

这是我的看法：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'bootstrap' 
], function ($, _, Backbone, Bootstrap) { 

     var MainView = Backbone.View.extend({ 

      el: $('.container'), 

      events: { 
       'click .nav-link.login': 'loginModal' 
      }, 

      loginModal: function() { 
       this.$('#login-email, #login-password').val(''); 
       this.$('#login-modal .alert').addClass('hide'); 
       this.$('#login-modal').modal(); 
      } 

     }); 

     return MainView; 

}); 

当我点击nav-link.login时，会触发函数'loginModal'，但它没有显示我的模态形式，其他指令工作。如果我打开javascript控制台并写这个。$（'＃login-modal'）。modal（），它的工作原理。

我看在DOM和自举如下加载：

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/libs/bootstrap.js"></script> 

有人能帮助我吗？

Answer 1

它看起来像你的MainView的$ el是空的，你还没有指定一个模板来使用它。所以，从本质上讲，当你在loginModal中引用“this”时，它试图找到与你的jquery选择器相匹配的第一个DOM元素 - 但它正在寻找里面的视图$ el，它是空的。当您从控制台尝试它时，“this”将成为全局文档范围，因此您可以找到它。

我的建议是将你的mainview的html加载到一个下划线模板，并将其渲染到主干的标准渲染函数中。或许，这将是这个样子：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'bootstrap', 
    '!text/path_to_html_templates/MainView.html' 
], function ($, _, Backbone, Bootstrap, mainViewTemplate) { 

    var MainView = Backbone.View.extend({ 

     $el: $('.container'), 

     template: _.template(mainViewTemplate), 

     events: { 
      'click .nav-link.login': 'loginModal' 
     }, 

     loginModal: function() { 
      this.$('#login-email, #login-password').val(''); 
      this.$('#login-modal .alert').addClass('hide'); 
      this.$('#login-modal').modal(); 
     }, 

     render: function() { 
      this.$el.html(this.template()); 
     } 

    }); 

    return MainView; 

}); 

我不知道够不够你的UI结构，以帮助你远不止这些，但希望至少给你一个起点。