Question

我有一个带有rails后端的骨干应用程序，并且我遇到了路由器的一些问题。

我有一个滑板＆＃39;斑点列表＆＃39;在他们的href属性中使用各自的id。每当点击这个地点时，我想渲染一个地点＆＃39;查看，但我遇到了麻烦，因为浏览器正在向href url发出GET请求到我后端不存在的路由。这会导致错误并阻止路由器代码触发，这会将正确的请求发送到服务器。是否有任何方法可以防止在单击href元素时发出GET请求，或者我误解了有关骨干路由器如何工作的信息？

让我感到困惑的是，我有一个类似于Instagram的页脚，每个页面都有href＆＃39;应用程序和点击它们时，它不会触发GET请求，但每当其中一个点“＃”点击它会发射一次。

我理解骨干路由器截获了所有url哈希变化，并且没有使用这些url发出任何请求。

更新：添加委托事件并调整其他一些内容我得到了正确的提取，但它仍然发出两个请求，一个到＆＃39; api / v1 / spots / ：ID＆＃39;哪个是正确的，一个是＃/ spot /：id＆＃39;这导致它在页面上出错。否则，视图会正确呈现

这是我的路由器。 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;
});

点集合视图中的模板。请注意id是如何在href。

中

<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>

SpotListView包含函数＆＃34; goToSpot（）＆＃34;触发路由器。

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

如何在使用Backbone.js更改url哈希时阻止页面发出GET请求

0 个答案: