Javascript 我能'；在index.html中使用require.js时，无法从ace.min.js获取事件

我是一个新的用户在网络开发，特别是使用ace，主干和需要脚本。我必须使用backbone.js创建一个MVC/MV*结构的网页。我已经成功地做到了这一点。之后，我注意到require.js并尝试使用它。但是，在我的一个html模板中有一个事件，需要“ace.min.js”。但在index.html中呈现该模板后，这将不起作用。以下是我的应用程序的代码和屏幕：-

1。index.html

3。router.js

    require.config({

    baseUrl: 'js/lib',

    paths: {
        //-------------------------------------------
        jquery      :   'jquery/jquery-2.0.3.min',
        underscore  :   'backbone/underscore-min',
        bootstrap   :   'bootstrap/bootstrap.min',
        backbone    :   'backbone/backbone-min',
        ace         :   'ace/ace.min',
        aceElements :   'ace/ace-elements.min',
        aceXtra     :   'ace/ace-extra.min',
        //--------------------------------------------
        app         :   '../app',
        tpl         :   '../tpl'
    },

    map: {
        '*': {
            'app/models/employee': 'app/models/memory/employee'
        }
    },

    shim: {
        'underscore': {
            deps: [ 'jquery'],
            exports: '_'
        },
        'backbone': {
            deps: [ 'jquery','underscore'],
            exports: 'Backbone'
        },
        'bootstrap': {
          deps: ['jquery'],
          exports: 'Bootstrap'
        },
        'ace':{
            deps: ['jquery','bootstrap'],
            exports:'Ace'
        },
        'aceElements': {
            deps: ['jquery','bootstrap','ace'],
            exports: 'AceElements'
        },
        'aceXtra': {
            deps: ['jquery','bootstrap','ace'],
            exports: 'AceXtra'
        }
    }
});

    require(['jquery', 'backbone', 'app/router', 'underscore', 'bootstrap', 'ace', 'aceElements', 'aceXtra'], function ($, Backbone, Router, _, Bootstrap, Ace, AceElements, AceXtra) {

    var router = new Router();

    $("body").on("click", ".back-button", function (event) {
        event.preventDefault();
        window.history.back();
    });

    Backbone.history.start();
});

 define(function (require) {

"use strict";

var $           = require('jquery'),
    Backbone    = require('backbone'),
    Ace         = require('ace'),
    PageSlider  = require('app/utils/pageslider'),
    WizardView  = require('app/views/Wizard'),
    slider      = new PageSlider($('')),
    wizardView  = new WizardView();

return Backbone.Router.extend({

    routes: {


            ""                  :       "home",
            "clinicmanage"      :       "ManageClinic",
            "clinicid/:id"      :       "RenderWizard"
    },

    home: function () {

            //this.editor = Ace.edit(wizardView.$el);
            //wizardView.delegateEvents();
            slider.slidePage(wizardView.$el);
            $('body').html(wizardView.$el);
            //slider = new PageSlider($('#wizardcontent'));

    },

    ManageClinic: function(){
        this.home();
        require(["app/views/ClinicManage"],function(Clinic){
            slider.slidePage(new Clinic().$el);
            //$('#wizardcontent').html(new Clinic().$el);
        });
    }

   });

 });

  define(function(require){

"use strict";

var $                   = require('jquery'),
    _                   = require('underscore'),
    Backbone            = require('backbone'),
    Ace                 = require('ace'),
    tpl                 = require('text!tpl/WizardView.html'),
    template            = _.template(tpl);


    return Backbone.View.extend({

       initialize: function(){
           //model

           this.render(); 

       },

       render: function(){
            this.$el.html(template());
            this.data.editor = Ace.edit("editor");
            return this;
       }


    });
});

4。Wizard.js

    require.config({

    baseUrl: 'js/lib',

    paths: {
        //-------------------------------------------
        jquery      :   'jquery/jquery-2.0.3.min',
        underscore  :   'backbone/underscore-min',
        bootstrap   :   'bootstrap/bootstrap.min',
        backbone    :   'backbone/backbone-min',
        ace         :   'ace/ace.min',
        aceElements :   'ace/ace-elements.min',
        aceXtra     :   'ace/ace-extra.min',
        //--------------------------------------------
        app         :   '../app',
        tpl         :   '../tpl'
    },

    map: {
        '*': {
            'app/models/employee': 'app/models/memory/employee'
        }
    },

    shim: {
        'underscore': {
            deps: [ 'jquery'],
            exports: '_'
        },
        'backbone': {
            deps: [ 'jquery','underscore'],
            exports: 'Backbone'
        },
        'bootstrap': {
          deps: ['jquery'],
          exports: 'Bootstrap'
        },
        'ace':{
            deps: ['jquery','bootstrap'],
            exports:'Ace'
        },
        'aceElements': {
            deps: ['jquery','bootstrap','ace'],
            exports: 'AceElements'
        },
        'aceXtra': {
            deps: ['jquery','bootstrap','ace'],
            exports: 'AceXtra'
        }
    }
});

    require(['jquery', 'backbone', 'app/router', 'underscore', 'bootstrap', 'ace', 'aceElements', 'aceXtra'], function ($, Backbone, Router, _, Bootstrap, Ace, AceElements, AceXtra) {

    var router = new Router();

    $("body").on("click", ".back-button", function (event) {
        event.preventDefault();
        window.history.back();
    });

    Backbone.history.start();
});

 define(function (require) {

"use strict";

var $           = require('jquery'),
    Backbone    = require('backbone'),
    Ace         = require('ace'),
    PageSlider  = require('app/utils/pageslider'),
    WizardView  = require('app/views/Wizard'),
    slider      = new PageSlider($('')),
    wizardView  = new WizardView();

return Backbone.Router.extend({

    routes: {


            ""                  :       "home",
            "clinicmanage"      :       "ManageClinic",
            "clinicid/:id"      :       "RenderWizard"
    },

    home: function () {

            //this.editor = Ace.edit(wizardView.$el);
            //wizardView.delegateEvents();
            slider.slidePage(wizardView.$el);
            $('body').html(wizardView.$el);
            //slider = new PageSlider($('#wizardcontent'));

    },

    ManageClinic: function(){
        this.home();
        require(["app/views/ClinicManage"],function(Clinic){
            slider.slidePage(new Clinic().$el);
            //$('#wizardcontent').html(new Clinic().$el);
        });
    }

   });

 });

  define(function(require){

"use strict";

var $                   = require('jquery'),
    _                   = require('underscore'),
    Backbone            = require('backbone'),
    Ace                 = require('ace'),
    tpl                 = require('text!tpl/WizardView.html'),
    template            = _.template(tpl);


    return Backbone.View.extend({

       initialize: function(){
           //model

           this.render(); 

       },

       render: function(){
            this.$el.html(template());
            this.data.editor = Ace.edit("editor");
            return this;
       }


    });
});

5。Wizard.html-模板

      <div class="navbar navbar-default" id="navbar">

          <div class="navbar-container" id="navbar-container">

            <div class="navbar-header pull-left">
                    <a href="#" class="navbar-brand">
                            <small>
                                    <i class="icon-home"></i>
                                    alloFactor home page
                            </small>
                    </a><!-- /.brand -->
            </div><!-- /.navbar-header -->

            <div class="navbar-header pull-right" role="navigation">
                    <ul class="nav ace-nav">

                            <li class="light-blue">
                                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                                            <img class="nav-user-photo" src="Source/avatars/user.jpg" alt="Jason's Photo" />
                                            <span class="user-info">
                                                    <small>Welcome,</small>

                                            </span>

                                            <i class="icon-caret-down"></i>
                                    </a>

                                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
                                            <li>
                                                    <a href="#">
                                                            <i class="icon-cog"></i>
                                                            Settings
                                                    </a>
                                            </li>

                                            <li class="divider"></li>

                                            <li>
                                                    <a href="#logout">
                                                            <i class="icon-off"></i>
                                                            Logout
                                                    </a>
                                            </li>
                                    </ul>
                            </li>
                    </ul><!-- /.ace-nav -->
            </div><!-- /.navbar-header -->
    </div><!-- /.container -->
     </div>

    <div class="main-container" id="main-container">

    <div class="main-container-inner">


    <a class="menu-toggler" id="menu-toggler" href="#">
        <span class="menu-text"></span>
    </a>

    <div class="sidebar" id="sidebar">

        <script type="text/javascript">
                try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
        </script>

        <ul class="nav nav-list">
            <li>
                <a href="#clinicmanage">
                    <i class="icon-book"></i>
                    <span class="menu-text"> Clinics </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-user"></i>
                    <span class="menu-text"> Users </span>
                </a>
            </li>
            <li>
                <a href="#" class="dropdown-toggle">
                    <i class="icon-desktop"></i>
                    <span class="menu-text"> Payers </span>
                </a>
            </li>
            <li>
                <a href="#" class="dropdown-toggle">
                    <i class="icon-phone"></i>
                    <span class="menu-text"> Fax </span>
                </a>
            </li>
             <li>
                <a href="#" class="dropdown-toggle">
                    <i class="icon-dashboard"></i>
                    <span class="menu-text"> Dashboard </span>
                </a>
            </li>
        </ul><!-- /.nav-list -->

        <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
        </div>

      </div>

      <div class="main-content" id="wizardcontent"></div>

      </div><!-- /.main-container-inner -->

      </div><!-- /.main-container -->

尝试{ace.settings.check（'sidebar'，'fixed'）}catch（e）{}

6。页面屏幕出现错误

---

在Wizard.js中，使用主干的视图事件绑定：

return Backbone.View.extend({
   events:{
       'click #menu-toggler' : 'toggleMenu'
   },
   initialize: function(){
       //model

       this.render(); 

   },
   render: function(){
        this.$el.html(template());
        this.data.editor = Ace.edit("editor");
        return this;
   },
   toggleMenu: function(e){ /* Do something with menu */ }
});

---

这就是你想要的吗？

其他一切都正常吗？我的意思是，你可以使用jQuery、bootstrap等等？我所知道的唯一的

ace.js

应该是一个代码编辑器。。。我想知道这与您的

侧边栏折叠有什么关系

左侧窗格中有一个折叠按钮，但我无法在单击它时获得更改。ace.js是一个基于bootstrap.js的网页设计模板。my wizard.js中有任何问题吗？变量Ace将得到一个未定义的值。请随时更新您的想法。您能给我们一个链接到您在哪里找到这个库吗？请不要与ace混淆。实际上，我的问题是“我无法使用backbone.js在我的视图模板中获取事件”是的。但是在渲染函数中，在“this.data.editor=Ace.edit（“editor”）；”行中出现错误“uncaughttypeerror:无法读取未定义”的属性“edit”。我不知道这是不是require.js的问题。请告诉我你对此的看法。。