Backbone.js - 404 jQuery error on navigate

2019-09-06 14:53发布

Navigation is not working as I expected, when I trigger goToTournament (see below) the current view just re-renders and I get a jQuery 404 not found error on the console. The URL is changing appropriately and the correct route method is being triggered as well.

// js/views/home.js

define([
    'jquery',
    'jquerym',
    'underscore',
    'backbone',
    'models/tournaments/featured',
    'collections/home',
    'text!/templates/home.html'
], function($, JQM, _, Backbone, FeaturedModel, HomeCollection, homeTemplate) {
    var HomeView = Backbone.View.extend({

        el: $('#site-main'),

        events: {
            'click .tournament': 'goToTournament'
        },

        initialize: function() {
            this.render();
        },

        render: function() {
            var homeCollection = new HomeCollection();
            homeCollection.fetch({
                success: function() {
                    var data = {tournaments: homeCollection.toJSON()};
                    var compiledTemplate = _.template(homeTemplate, data);
                    $('#site-main').html(compiledTemplate);
                    $('.main-content').fadeTo(500, 1);
                    return this;
                }
            });
        },

        goToTournament: function(e) {
            this;
            var t_id = $(e.currentTarget).data('id');
            var router = new Backbone.Router();
            router.navigate('tournament/' + t_id, {trigger: true})
        }
    });
    return HomeView;
});


// js/router.js

define([
    'jquery',
    'underscore',
    'backbone',
    'views/home',
    'views/tournament',
    'collections/tournament'
], function($, _, Backbone, HomeView, TournamentView, TournamentCollection) {

    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'home',
            'tournament/:id': 'tournament'
        }
    });

    var initialize = function() {
        var app_router = new AppRouter;

        app_router.on('route:home', function() {
            var homeView = new HomeView();
        });

        app_router.on('route:tournament', function(id) {
            var tournament = new TournamentCollection({ id: id });
            tournament.fetch({
                success: function() {
                    var tournamentView = new TournamentView({collection: tournament});
                }
            });
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

1条回答
不美不萌又怎样
2楼-- · 2019-09-06 15:48

I got it working by completely disabling jquery mobile's loading method. I made a jqm-config.js file and made sure it was caled before jquery mobile itself.

查看更多
登录 后发表回答