Javascript 如何防止页面在url哈希更改为Backbone.js时发出GET请求

我有一个带有rails后端的主干应用程序，我的路由器有一些问题

我有一个滑板“点”列表，它们的href属性中有各自的id。无论何时单击该点，我都希望呈现“点”视图，但我遇到了问题，因为浏览器正在向href url发出GET请求，以获取我后端中不存在的路由。这会导致错误，并阻止路由器代码触发，从而向服务器发送正确的请求。是否有任何方法可以防止在单击href元素时发出GET请求，或者我对主干路由器的工作原理有误解

同样让我困惑的是，我有一个类似instagram的页脚，在应用程序的每个不同“页面”上都有href，当这些页面被点击时，它不会发出get请求，但只要点击其中一个“点”，它就会发出一个get请求

我知道主干路由器截获了所有url散列更改，没有对这些url发出任何请求

更新：添加委托事件并调整一些其他内容，我让它正确地进行提取，但是它仍然发出两个请求，一个请求“api/v1/spots/：id”，这是正确的，另一个请求“spot/：id”，这导致它在页面上出现错误。但是，视图以其他方式正确渲染

这是我的路由器。showSpot函数将发出正确的请求，因为它正在获取模型，并且模型中定义了正确的url

define([
'jquery',
'underscore',
'backbone',
'views/spots/spot_view',
'views/spots/spotlist_view',
'views/spots/upload_view',
'views/profile/profile_view',
'views/map_view',
'views/home/home_view',
'models/spot_model',
'views/profile/friends_view',
'collections/spot_collection',
], function($, _, Backbone, SpotView, SpotListView, UploadView, ProfileView, MapView, HomeView, Spot, FriendsView, SpotCollection){
var Router = Backbone.Router.extend({

initialize: function(){
},


routes: {

  ''          : 'home',
  'home'      : 'home',
  'spot/:id'  : 'showSpot',
  'spotlist'  : 'showSpotList',
  'upload'    : 'upload',
  'profile'   : 'profile',
  'map'       : 'map',

},

  home: function(){
    console.log('home view');
    var view = new HomeView;
    this.render(view);
  },

  showSpot: function(id){
    var self = this;
    var spot = new Spot({id: id});

    spot.fetch({
      success: function(spot){
        var view = new SpotView({model: spot});
        self.render(view);
        $('#back-button').show();
      },
      error: function(spot){
        console.log("Spot fetch was unsucessful in showSpot.");
      }
    });
    console.log('spot view spot id: ' + id);

  },

  showSpotList: function(){
    console.log('spot list view');
    var spots = new SpotCollection();
    var that = this;

    spots.fetch({
      success: function(spots) {
        console.log("Spot collection fetch was successful in showSpotList.");
        var view = new SpotListView({collection: spots}); //pass in collection
        that.render(view);
      },
      error: function() {
        console.lot("Spot collection fetch was unsucessful in showSpotList.");
      }
    });
  },

  upload: function(){
    console.log('upload view');
    var view = new UploadView;
    this.render(view);
  },

  profile: function(){
    console.log('profile view');
    var view = new ProfileView;
    this.render(view);
  },

  map: function(){
    console.log('map view');
    var view = new MapView;
    this.render(view);
  },


  render: function(view) {
    //close current view
    if(this.currentView) {
      this.currentView.undelegateEvents();
      this.currentView.$el.removeData().unbind();
    }

    view.render();

    this.currentView = view;
    return this;
  }


});


return Router;
});

“点集”视图中的模板。注意href中的id是如何显示的

<ul data-role="listview" data-filter="true" data-theme='b' data-filter-placeholder="Search Spots" data-inset="true">
    <% _.each(spots, function(spot) { %>
        <li class="spot"><a href="#spot/<%= spot.id %>"><%= spot.name %></a></li>
    <% }); %>
</ul>

---

你不应该调用

Router.navigate

吗？问题是“navigate”甚至没有被调用（我假设是这样），因为例如404到“/spot/1”会导致页面错误。我在goToSpot（）中有一个log语句，它没有记录任何东西。这个

log

语句到底放在哪里？所以我才意识到我没有为spotList视图运行这个.delegateEvents（）。这导致调用了goToSPot（）函数，但现在我收到一个奇怪的underline.js错误，说“title未定义”。嗯。顺便说一下，log语句就在soruce.preventDefault（）更新的正上方：@raina77ow添加委托事件并调整一些其他内容，我让它正确地执行提取操作，但是，它仍在发出两个请求，一个是正确的“api/v1/spots/：id”，另一个是导致页面出错的“spot/：id”。但是，视图会正确渲染。

define([
'jquery',
'underscore',
'backbone',
'collections/spot_collection',
'text!templates/spotlist_tpl.html',
'models/spot_model',
], function($, _, Backbone, SpotCollection, SpotListTpl, SpotModel){

'use strict';

var SpotListView = Backbone.View.extend({

el: '#content',

template: _.template(SpotListTpl),

initialize: function(){

},

events: {
  'click .spot': 'goToSpot'
},

render: function() {
  console.log(this.collection.toJSON());
  this.$el.html(this.template({spots: this.collection.toJSON()}));
  this.$el.trigger("create");
},

goToSpot: function(source) {
    source.preventDefault();
    var hrefRslt = source.target.getAttribute('href');
    Backbone.history.navigate(hrefRslt, {trigger:true});
    return false;
}

});

return SpotListView;
});