Backbone.js的 - 航行，404 jQuery的错误 [英] Backbone.js - 404 jQuery error on navigate

问题描述

导航不工作如我所料，当我触发goToTournament（见下文）只是当前视图重新呈现和我得到的控制台上一个jQuery 404未找​​到错误。 URL被适当地改变，并且被触发，以及正确的路由方法。

  // JS /视图/ home.js定义（[
    jQuery的，
    jquerym'，
    下划线，
    '骨干'，
    模型/邀请赛/功能'，
    收藏/家，
    的文字！/templates/home.html
]函数（$，JQM，_，骨干，FeaturedModel，HomeCollection，homeTemplate）{
    VAR HomeView = Backbone.View.extend（{        EL：$（'＃站点主），        事件：{
            点击.tournament'：'goToTournament
        }，        初始化：功能（）{
            this.render（）;
        }，        渲染：功能（）{
            VAR homeCollection =新HomeCollection（）;
            homeCollection.fetch（{
                成功：函数（）{
                    VAR数据= {锦标赛：homeCollection.toJSON（）};
                    变种compiledTemplate = _.template（homeTemplate，数据）;
                    $（'＃站点主）HTML（compiledTemplate）;
                    $（'。主要内容）fadeTo（500，1）;
                    返回此;
                }
            }）;
        }，        goToTournament：功能（E）{
            这个;
            VAR t_id = $（e.currentTarget）。数据（ID）;
            VAR路由器=新Backbone.Router（）;
            router.navigate（赛/+ t_id，{触发：真}）
        }
    }）;
    返回HomeView;
}）;
// JS / router.js定义（[
    jQuery的，
    下划线，
    '骨干'，
    意见/家，
    意见/赛'，
    收藏/赛
]函数（$，_，骨干，HomeView，TournamentView，TournamentCollection）{    VAR AppRouter = Backbone.Router.extend（{
        路线：{
            ''：'家'，
            赛/：身份证'：'比赛'
        }
    }）;    VAR初始化函数=（）{
        VAR app_router =新AppRouter;        app_router.on（'路线：家，函数（）{
            VAR homeView =新HomeView（）;
        }）;        app_router.on（'路线：赛'，函数（ID）{
            VAR赛=新TournamentCollection（{ID：ID}）;
            tournament.fetch（{
                成功：函数（）{
                    VAR tournamentView =新TournamentView（{集合：赛}）;
                }
            }）;
        }）;        Backbone.history.start（）;
    };    返回{
        初始化：初始化
    };
}）;
 

解决方案

我把它通过完全禁用jQuery Mobile的的装载方法的工作。我做了一个 JQM-config.js 文件，并确保它是jQuery Mobile的本身之前caled。

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

解决方案

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.

这篇关于Backbone.js的 - 航行，404 jQuery的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！