个人中心
gpt4 book ai didi

javascript - 在 index.html 中使用 require.js 时，我无法从 ace.min.js 获取事件

转载 作者：行者123 更新时间：2023-11-28 01:44:07 25 4
gpt4 key购买 nike

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

<强>1。 index.html

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/css/ace-fonts.css" />
<link rel="stylesheet" href="styles/css/ace.min.css" />
<link rel="stylesheet" href="styles/css/ace-rtl.min.css" />
<link rel="stylesheet" href="styles/css/ace-skins.min.css" />
<link rel="stylesheet" href="styles/css/datepicker.css"/>

<link rel="stylesheet" href="styles/css/pageslider.css">

<script data-main="js/app" src="js/require.js"></script>
 </head> <body></body> </html>

<强>2。应用程序.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();
});

<强>3。路由器.js

 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);
        });
    }

   });

 });

<强>4。 Sprite .js

  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 -->

6.页面屏幕错误

Page screen with issue

最佳答案

在 Wizard.js 中，使用 Backbone 的 View 事件绑定(bind):

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 */ }
});

这就是您要找的东西吗？

关于javascript - 在 index.html 中使用 require.js 时，我无法从 ace.min.js 获取事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23843103/

25 4 0
文章推荐： html - 如何将超链接作为文本溢出？
文章推荐： c++ - QTimer::singleShot 在 qkeyevent 中不起作用
文章推荐： c++ - antlr cpp 目标的 header 部分不允许使用默认参数的外部函数
文章推荐： html - 中间有重叠的响应式方形图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com