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

时间:2014-08-15 16:04:13

标签: javascript jquery jquery-mobile backbone.js

导航无法按预期工作,当我触发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 个答案:

答案 0 :(得分:0)

我通过完全禁用jquery mobile的加载方法来实现它。我创建了一个jqm-config.js文件,并确保它在jquery mobile本身之前被解锁。