Backbone.js - 导航时出现 404 jQuery 错误

Posted 2023-05-09

【中文标题】Backbone.js - 导航时出现 404 jQuery 错误

【英文标题】：Backbone.js - 404 jQuery error on navigate

【发布时间】：2014-10-09 09:30:10

【问题描述】：

导航没有按我的预期工作，当我触发 goToTournament（见下文）时，当前视图只是重新渲染，我在控制台上收到 jQuery 404 not found 错误。 URL 正在适当更改，并且正在触发正确的路由方法。

// 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】：

我通过完全禁用 jquery mobile 的加载方法使其正常工作。我制作了一个jqm-config.js 文件，并确保它在 jquery mobile 本身之前被调用。