CODEWITHSUNDEEP
javascriptjqueryhtmlbackbone.jsrequirejs
Archit Aggarwal
Archit Aggarwal

Reputation: 115

Issue loading the backbone view for the first time

I want to load one of my javascript automatically on the load of my html page. The html page on load of which I want to load my js file.

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

The javascript I want to load is

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

I am getting the following error Uncaught Error: Mismatched anonymous define() module

Please help me thanks in advance.

Upvotes: 0

Views: 78

Answers (1)

T J
T J

Reputation: 43156

The error is because you have:

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

The docs says:

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

And that's what you're doing.

And in solutions:

  • Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.

  • If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.

So simply load it using requireJS from your main file or name the module

Upvotes: 1

Related Questions