首次加载骨干视图的问题

时间:2017-03-23 13:08:44

标签: javascript jquery html backbone.js requirejs

我想在我的html页面加载时自动加载我的一个javascript。 加载的html页面,我想加载我的js文件。

<!DOCTYPE html>
<html>

<head>
    <script src="/static/js/LoginApp.js"></script>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
</head>

<body>
    <div class="container">
        <h1>Backbone Tutorial Blogroll App</h1>
        <button type="button" id="newButton">Click Me!</button>
        <script src="/static/js/require.js"></script>
        <script src="/static/js/LoadView.js"></script>
    </div>
</body>

</html>

我要加载的JavaScript是

LoadView.js

define([
        'jquery',
        'underscore',
        'backbone',
        'LoadView',
        'text!NewViewCheck.html',

        ], function($, _, Backbone, LoadView, NewViewCheck) {
    var Task = Backbone.Model.extend({
        defaults: {}
    });
    TheView = Backbone.View.extend({
        model: new Task(),
        events: {
            'click #newButton': 'initializeView',
        },
        //'template' provides access to instance data when rendering the view
        template: _.template(NewViewCheck),
        initialize: function() {
            console.log('Inside the initialize function');
            this.render();
        },
        render: function() {
            //this.$el.html(this.template());
            console.log(labelsLocale);
            this.$el.html(this.template({}));
            $('#dialogContent').empty().append(this.$el);
            $('#addUserDefinedOption').modal('show');
        },
        initializeView: function() {
            var theView = new TheView();
            console.log('abc');
        },
    });
    $(document).ready(function() {
        //console.log('abc');
    })
});

我收到以下错误 Uncaught Error: Mismatched anonymous define() module

请事先帮助我。

1 个答案:

答案 0 :(得分:1)

错误是因为你有:

<script src="/static/js/LoadView.js"></script>

docs说:

  

如果您在HTML中手动编写脚本标记以使用匿名的define()调用加载脚本,则可能会发生此错误。

这就是你正在做的事情。

在解决方案中:

  
      
  • 确保通过RequireJS API加载调用define()的所有脚本。不要在HTML中手动编写脚本标记以加载在其中调用define()的脚本。

  •   
  • 如果手动编写HTML脚本标记代码,请确保它只包含命名模块,并且不会加载与该文件中某个模块同名的匿名模块。

  •   

只需使用主文件中的requireJS加载它或命名模块

即可